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

Question

我正在为 Laravel 项目 准备 vue.js。一切都很好，直到我在我的终端中尝试运行 npm run watch。 Js资产被发射。但是，我在使用 scss 时遇到了一些错误。我找不到导致该错误的原因。

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

Answer 1

半天后我解决了这个问题。

我找到这个 how to update dependencies。所以我决定听从建议并尝试更新我的依赖项。之后我得到另一个错误：

[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 并得到另一个错误：
解决方案来自这里： 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

对于这个错误，我在那里找到了解决方案：
所以我只是将我的 webpack.mix.js 更改为：

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

至：

mix.js('resources/assets/js/app.js', 'public/js').vue()
.sass('resources/assets/sass/app.scss', 'public/css');

它解决了我的问题。也许它可以帮助某人节省时间

Answer 2

我在 3 天后找到错误的答案

我首先想到的是野兔 https://github.com/laravel-mix/laravel-mix/issues/2450

这个 seid 问题是从 "laravel-mix": "^5.0.4" 到 "laravel-mix": "^5.0.5"

下一步安装css-loader v3.5.3

     $ npm uninstall --save-dev css-loader
     $ npm install --save-dev css-loader@3.5.3

如果你对此有疑问，你应该使用 sass-loader v7.1.0 和 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",

Answer 3

我在尝试升级 React 应用程序时遇到了同样的 css 错误。将 'css-loader' 从 5.6 降级到 3.5.3 为我解决了 webpack v4.46 的问题。