Problems with Laravel webpack
Hello!!
Just purchased Metronic and while following instruction here https://preview.keenthemes.com/laravel/metronic/docs/getting-started I get the following error when running "npm run dev"
[webpack-cli] TypeError: Cannot read properties of null (reading "1")
at C:\MAMP\htdocs\limitless\webpack.mix.js:135:53
at Array.forEach (<anonymous>)
at Object.<anonymous> (C:\MAMP\htdocs\limitless\webpack.mix.js:134:115)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at module.exports (C:\MAMP\htdocs\limitless\node_modules\laravel-mix\setup\webpack.config.js:11:5)I really don't want to mess around with the code as I'm sure there should be some simpler solution so any help on the right direction would be appreciated...
My current development environment is...
Windows 10
Node 18.16
Composer 2.5.5
PHP 8.1.0
Yarn 1.22.19
Replies (4)
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
Hi,
That line of code responsible for copying icons folder. Maybe you can try to replace it with this optimised block of code.
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);
}
});
Hi,
Here are a few steps you can take to troubleshoot and resolve the issue:
Clean Node Modules and Reinstall Dependencies: In your project directory, run the following commands to clean the existing node modules and reinstall the dependencies:
npm run clean
npm install
Check webpack.mix.js Configuration: Open the webpack.mix.js file and review the configuration. Look for any syntax errors or incorrect settings. Pay attention to the line mentioned in the error message (C:\MAMP\htdocs\limitless\webpack.mix.js:135:53) and check that specific line for any potential issues.
Clear Cache: If the above steps don't resolve the issue, try clearing the Laravel Mix cache by running the following command:
npx mix clear
Well I tried all of what you suggest with the following results...
- npm run clean shows this err
npm ERR! Missing script: "clean" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in:
Running "npm run" shows the following
Scripts available in undefined via `npm run-script`:
dev
npm run development
development
mix
watch
mix watch
watch-poll
mix watch -- --watch-options-poll=1000
hot
mix watch --hot
prod
npm run production
production
mix --production
- I reviewed the code as suggested... The line in question is the following...
var folder = file.match(/node_modules\/(.*?)\//)[1];
The array seemed odd so I deleted it and then run "npm run dev" again, and... everything seems correct now.
- I did used "npx mix clear" but had the same error as the one I showed before.
If this is purposedly something that is wrong in the files, it would be note worthy to change it in all files.
