Installation of "Good" theme with Laravel
Hello,
I purchased the "Good" theme, I followed the documentation at the "Server Side Integration" section step by step, starting with a fresh installation of Laravel 8.
But when I get to npm run dev I get this error:
[webpack-cli] TypeError: Cannot read properties of null (reading "1")
at C:\Users\Giuliano\code\project\webpack.mix.js:217:57
at Array.forEach (<anonymous>)
at Object.<anonymous> (C:\Users\Giuliano\code\project\webpack.mix.js:215:71)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at module.exports (C:\Users\Giuliano\code\project\node_modules\laravel-mix\setup\webpack.config.js:11:5)File webpack.mix.js:
const mix = require("laravel-mix");
const glob = require("glob");
const path = require("path");
const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");
const rimraf = require("rimraf");
const del = require("del");
const fs = require("fs");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
// Global jquery
mix.autoload({
jquery: ["$", "jQuery"],
Popper: ["popper.js", "default"],
});
mix.options({
cssNano: {
discardComments: false,
},
});
// Remove existing generated assets from public folder
del.sync([
"public/assets/css/*",
"public/assets/js/*",
"public/assets/media/*",
"public/assets/plugins/*",
]);
// Build 3rd party plugins css/js
mix.sass(
`resources/src/webpack/plugins/plugins.scss`,
`public/plugins/global/plugins.bundle.css`
)
.then(() => {
// remove unused preprocessed fonts folder
rimraf(path.resolve("public/assets/fonts"), () => {});
rimraf(path.resolve("public/assets/images"), () => {});
})
.sourceMaps(!mix.inProduction())
// .setResourceRoot("./")
.options({ processCssUrls: false })
.js(
[`resources/src/webpack/plugins/plugins.js`],
`public/assets/plugins/global/plugins.bundle.js`
);
// Build extended plugin styles
mix.sass(
`resources/src/sass/plugins.scss`,
`public/assets/plugins/global/plugins-custom.bundle.css`
);
// Build css/js
mix.sass(
`resources/src/sass/style.scss`,
`public/assets/css/style.bundle.css`,
{
sassOptions: { includePaths: ["node_modules"] },
}
)
// .options({processCssUrls: false})
.js(
[`resources/src/webpack/scripts.js`],
`public/assets/js/scripts.bundle.js`
)
.webpackConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "resources/"),
},
},
});
// Build custom 3rd party plugins
(glob.sync(`resources/src/webpack/plugins/custom/**/*.js`) || []).forEach(
(file) => {
mix.js(
file,
`public/assets/${file
.replace(`resources/src/webpack/`, "")
.replace(".js", ".bundle.js")}`
);
}
);
(glob.sync(`resources/src/webpack/plugins/custom/**/*.scss`) || []).forEach(
(file) => {
mix.sass(
file,
`public/assets/${file
.replace(`resources/src/webpack/`, "")
.replace(".scss", ".bundle.css")}`
);
}
);
// Build css pages (single page use)
(glob.sync(`resources/src/sass/pages/**/!(_)*.scss`) || []).forEach((file) => {
file = file.replace(/[\\\/]+/g, "/");
mix.sass(
file,
file
.replace(`resources/src/sass`, `public/assets/css`)
.replace(/\.scss$/, ".css")
);
});
var extendedFiles = [];
// Extend custom js files for laravel
(glob.sync("resources/assets/extended/js/**/*.js") || []).forEach((file) => {
var output = `public/assets/${file.replace(
"resources/assets/extended/",
""
)}`;
mix.js(file, output);
extendedFiles.push(output);
});
// JS pages (single page use)
(glob.sync("resources/src/webpack/js/custom/**/*.js") || []).forEach((file) => {
var output = `public/assets/${file.replace("resources/src/webpack/", "")}`;
if (extendedFiles.indexOf(output) === -1) {
mix.js(file, output);
}
});
(glob.sync(`resources/src/js/custom/**/*.js`) || []).forEach((file) => {
var output = `public/assets/${file.replace(`resources/src/`, "")}`;
if (extendedFiles.indexOf(output) === -1) {
mix.js(file, output);
}
});
// Media
mix.copyDirectory(`resources/src/media`, `public/assets/media`);
// Theme
(glob.sync(`resources/src/sass/themes/**/!(_)*.scss`) || []).forEach((file) => {
file = file.replace(/[\\\/]+/g, "/");
mix.sass(
file,
file
.replace(`resources/src/sass`, `public/assts/css`)
.replace(/\.scss$/, ".css")
);
});
let plugins = [
new ReplaceInFileWebpackPlugin([
{
// rewrite font paths
dir: path.resolve(`public/assets`),
test: /\.css$/,
rules: [
{
// fontawesome
search: /url\((\.\.\/)?webfonts\/(fa-.*?)"?\)/g,
replace: "url(./fonts/@fortawesome/$2)",
},
{
// flaticon
search: /url\(("?\.\/)?font\/(Flaticon\..*?)"?\)/g,
replace: "url(./fonts/flaticon/$2)",
},
{
// flaticon2
search: /url\(("?\.\/)?font\/(Flaticon2\..*?)"?\)/g,
replace: "url(./fonts/flaticon2/$2)",
},
{
// keenthemes fonts
search: /url\(("?\.\/)?(Ki\..*?)"?\)/g,
replace: "url(./fonts/keenthemes-icons/$2)",
},
{
// lineawesome fonts
search: /url\(("?\.\.\/)?fonts\/(la-.*?)"?\)/g,
replace: "url(./fonts/line-awesome/$2)",
},
{
// socicons
search: /url\(("?\.\.\/)?font\/(socicon\..*?)"?\)/g,
replace: "url(./fonts/socicon/$2)",
},
{
// bootstrap-icons
search: /url\(.*?(bootstrap-icons\..*?)"?\)/g,
replace: "url(./fonts/bootstrap-icons/$1)",
},
],
},
]),
];
mix.webpackConfig({
plugins: plugins,
ignoreWarnings: [
{
module: /esri-leaflet/,
message: /version/,
},
],
});
// Webpack.mix does not copy fonts, manually copy
(glob.sync(`resources/src/plugins/**/*.+(woff|woff2|eot|ttf)`) || []).forEach(
(file) => {
var folder = file.match(/node_modules\/(.*?)\//)[1];
mix.copy(
file,
`public/assets/plugins/global/fonts/${folder}/${path.basename(
file
)}`
);
}
);
(
glob.sync(
"node_modules/+(@fortawesome|socicon|line-awesome|bootstrap-icons)/**/*.+(woff|woff2|eot|ttf)"
) || []
).forEach((file) => {
var folder = file.match(/node_modules\/(.*?)\//)[1];
mix.copy(
file,
`public/assets/plugins/global/fonts/${folder}/${path.basename(file)}`
);
});
// Raw plugins
(glob.sync(`resources/src/webpack/plugins/custom/**/*.js.json`) || []).forEach(
(file) => {
let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
const fileName = path.basename(file).replace(".js.json", "");
mix.scripts(
filePaths,
`public/assets/plugins/custom/${fileName}/${fileName}.bundle.js`
);
}
);How can I solve this issue?
Replies (7)
I think that i solved the issue, in line 217 i changed:
var folder = file.match(/node_modules\/(.*?)\//)[1];With:
var folder = file.match(/resources\/src\/plugins\/(.*?)\//)[1];And i think that there was another error in line 43 (Following the structure of the other codes), and i changed:
"public/plugins/global/plugins.bundle.css"With:
"public/assets/plugins/global/plugins.bundle.css"Please correct me if i made some mistakes.
This solved many issue but now on npm run dev i get 3 warnings and 1 error:
WARNING in ./node_modules/handlebars/lib/index.js 22:38-56
require.extensions is not supported by webpack. Use a loader instead.
WARNING in ./node_modules/handlebars/lib/index.js 23:2-20
require.extensions is not supported by webpack. Use a loader instead.
WARNING in ./node_modules/handlebars/lib/index.js 24:2-20
require.extensions is not supported by webpack. Use a loader instead.
ERROR in ./node_modules/handlebars/lib/index.js 17:11-24
Module not found: Error: Can"t resolve "fs" in "C:\Users\Giuliano\homestead_code\motortrading\node_modules\handlebars\lib"This error does not allow me to see graphs and some other things
Why is this process so buggy?
Hi,
Look like the package.json preview in our doc is outdated, could you please use the actual dependency list from theme/tools/package.json?
We will include a fix in the next Good theme releases.
Hello,
Thank you for your reply, but unfortunately with the suggested changes the installation still fails.
Can you send me a copy of the files package.json and webpack.mix.js corrected?
I bought the theme to develop a product for a client of mine and I could have economic penalties if I don't execute the project in the agreed time.
Thank you in advance.
Best regards,
Giuliano
Hi,
Sorry for the late reply.
The packge.json provided in the tools folder should work fine, just do not forget to leave devDependencies, which was included in the newly created project.
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"To fix build errors make the changes listed below:
1) You will need to include one more alias.
"handlebars": "handlebars/dist/handlebars.js",2)Add an additional mix task to bundle widget files.
mix.js("./resources/src/js/widgets/**/!(_)*.js", "public/assets/js/widgets.bundle.js");Hi again,
If you somehow get a chance to rate Good Admin on Getbootstrap Market, it would help us a lot.
Best Regards,
Lauris
Aplique lo siguiente
* npm install --global yarn
* composer update
* copy .env.example .env
* php artisan migrate:fresh --seed
* php artisan key:generate
----------------------------------------------
* editar webpack.mix.js
Colocar despues de la linea 153 lo siguiente
// Webpack.mix does not copy fonts, manually copy
//(glob.sync(`resources/assets/core/plugins/**/*.+(woff|woff2|eot|ttf|svg)`) || []).forEach(file => {
// var folder = file.match(/resources\/.*?\/core\/plugins\/(.*?)\/.*?/)[1];
//mix.copy(file, `public/${demo}/plugins/global/fonts/${folder}/${path.basename(file)}`);
//});
(glob.sync('node_modules/+(@fortawesome|socicon|line-awesome|bootstrap-icons)/**/*.+(woff|woff2|eot|ttf)') || []).forEach(file => {
const folder = file.match(/node_modules\/(.*?)\//)?.[1];
if (folder) {
const destination = `public/assets/plugins/global/fonts/${folder}/${path.basename(file)}`;
mix.copy(file, destination);
}
});
(glob.sync('node_modules/jstree/dist/themes/default/*.+(png|gif)') || []).forEach(file => {
mix.copy(file, `public/${demo}/plugins/custom/jstree/${path.basename(file)}`);
});
----------------------------------------------
* Abrir archivo package.json buscar "@popperjs/core": "2.11.5", y cambiar a "@popperjs/core": "^2.11.5",
* npm install --save glob
* npm install typed.js@2.0.12
* npm run dev
Ya deberia compilar, seria para laravel, probado en la version 8.1.5
