CODEWITHSUNDEEP
npmlaravel-mix
Aldas Butkus
Aldas Butkus

Reputation: 21

Why Npm run watch giving to me TypeError: text.forEach is not a function

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

Package.json

{
    "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

Answers (3)

srisonic
srisonic

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

Mm.Mirzaei.dev
Mm.Mirzaei.dev

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

Aldas Butkus
Aldas Butkus

Reputation: 21

After half day I fixed that issue.

  1. I find this how to update dependencies. So I decided to follow an advice and try to update my dependencies. After that I get another error:

[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.

  1. So I just remove --hide-modules and get another error:
    solution comes from here: Unknown argument: --hide-modules

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

  1. For this error i find solution there: “You may need an appropriate loader” for template tags
    So I just change my webpack.mix.js from:

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

Related Questions