Question

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

<块引用>

./resources/assets/sass/app.scss 中的错误
模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：
TypeError：text.forEach 不是函数
在 /opt/lampp/htdocs/larticles_api-master/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/loader.js:145:16
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:343:11
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:681:15
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :24:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:678:31
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1423:35
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1414:32
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1409:36
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1405:32
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在 Compilation.seal (/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1342:27)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compiler.js:675:18
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1261:4
在 AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
在 AsyncSeriesHook.lazyCompileHook (/opt/lampp/htdocs/larticles_api-master/node_modules/tapable/lib/Hook.js:154:20)
在 Compilation.finish (/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1253:28)
在/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)
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1185:12
在/opt/lampp/htdocs/larticles_api-master/node_modules/webpack/lib/Compilation.js:1097:9
在 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] 错误：未知选项 '--hide-modules'
[webpack-cli] 运行 'webpack --help' 以查看可用的命令和选项
npm 错误！代码生命周期
npm 错误！错误2
npm 错误！ @ 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 错误！退出状态2
npm 错误！
npm 错误！ @ 开发脚本失败。
npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

所以我只是删除 --hide-modules 并得到另一个错误：
解决方案来自这里： Unknown argument: --hide-modules

<块引用>

./resources/assets/js/components/ExampleComponent.vue 中的错误 1:0
模块解析失败：意外令牌 (1:0)
您可能需要一个合适的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见https://webpack.js.org/concepts#loaders
|
|
webpack 编译时出现 1 个错误

对于这个错误，我在那里找到了解决方案：“You may need an appropriate loader” for template tags
所以我只是改变了我的 webpack.mix.js 从：

<块引用>

mix.js('resources/assets/js/app.js', 'public/js')
.sass('资源/资产/sass/app.scss', '公共/css');

到：

<块引用>

mix.js('resources/assets/js/app.js', 'public/js').vue()
.sass('资源/资产/sass/app.scss', '公共/css');

它解决了我的问题。也许它有助于某人节省时间

为什么 Npm run watch 给我 TypeError: text.forEach is not a function

Package.json

1 个答案: