Search code examples
npmlaravel-mix

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"
    }
}
Solution

  • 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