Reputation: 21
I am preparing vue.js for Laravel project. Everything was fine until I tried to run npm run watch
in my terminal. Js assets are emitted. But, I get some errors with scss. I cannot find what is causing that error.
ERROR in ./resources/assets/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: text.forEach is not a function
at /opt/lampp/htdocs/larticles_api-master/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/loader.js:145:16
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:343:11
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:681:15
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:678:31
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1423:35
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1414:32
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1409:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1405:32
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1342:27)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:675:18
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1261:4
at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.finish (/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1253:28)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:672:17
at eval (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :11:1)
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1185:12
at /opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1097:9
at processTicksAndRejections (internal/process/task_queues.js:75:11)
@ ./resources/assets/sass/app.scss
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"config": {
"webpack": "node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"bootstrap": "^4.6.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^7.0",
"css-loader": "^5.0.2",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"node-laravel": "^0.9.6",
"node-sass": "^4.14.1",
"style-loader": "^2.0.0"
}
}
Upvotes: 1
Views: 4721
Reputation: 11
I had the same css error when trying to upgrade a react app. Downgrading 'css-loader' from 5.6 to 3.5.3 fixed the issue for me with webpack v4.46.
Upvotes: 1
Reputation: 363
I find my answer for with error after 3 day
first I sould sey is see hare https://github.com/laravel-mix/laravel-mix/issues/2450
this issues seid problem is from "laravel-mix": "^5.0.4" to "laravel-mix": "^5.0.5"
next install css-loader v3.5.3
$ npm uninstall --save-dev css-loader
$ npm install --save-dev [email protected]
If you have problem with this you should use sass-loader v7.1.0 and node-sass v4.14.1
// package.json
"css-loader": "^3.5.3",
"laravel-mix": "^5.0.4",
"node-sass": "^4.14.1",
"sass-loader": "^7.1.0",
Upvotes: 3
Reputation: 21
After half day I fixed that issue.
[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
--hide-modules
and get another error:ERROR in ./resources/assets/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|
webpack compiled with 1 error
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
to:
mix.js('resources/assets/js/app.js', 'public/js').vue()
.sass('resources/assets/sass/app.scss', 'public/css');
and it's fixed my issue. Maybe it helps for someone to save time on it
Upvotes: 1