laravel - Webpack 已使用与使用 Vue Js 的 Laravel 7 中的 API 模式不匹配的配置对象进行初始化

Question

我正在使用 laravel 7 和 Vue Js 开发一个项目，但是每当我输入 npm run watch 或 npm run dev 时，我的程序突然停止编译，我收到以下错误 错误代码

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daa9b9b2b5b5b69aebf4eaf4ea" rel="noreferrer noopener nofollow">[email protected]</a> development C:\xampp4\htdocs\school
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:281
                                throw err;
                                ^

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[10] has an unknown property 'loaders'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.
    at validate (C:\xampp4\htdocs\school\node_modules\webpack\node_modules\schema-utils\dist\validate.js:104:11)
    at validateSchema (C:\xampp4\htdocs\school\node_modules\webpack\lib\validateSchema.js:73:2)
    at create (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:102:3)
    at webpack (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:139:31)
    at f (C:\xampp4\htdocs\school\node_modules\webpack\lib\index.js:35:15)
    at processOptions (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:272:16)
    at yargs.parse (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:364:3)
    at Object.parse (C:\xampp4\htdocs\school\node_modules\yargs\yargs.js:576:18)
    at C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCli (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:54:2)
    at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:140:2)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:282:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5427373c3b3b3814657a647a64" rel="noreferrer noopener nofollow">[email protected]</a> development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c0f1f141313103c4d524c524c" rel="noreferrer noopener nofollow">[email protected]</a> development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_066Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="611202090e0e0d21504f514f51" rel="noreferrer noopener nofollow">[email protected]</a> dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad9c9c2c5c5c6ea9b849a849a" rel="noreferrer noopener nofollow">[email protected]</a> dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_176Z-debug.log

C:\xampp4\htdocs\school>install -g n
'install' is not recognized as an internal or external command,
operable program or batch file.

C:\xampp4\htdocs\school>npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f698b6c0d8c1d8c6" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T20_04_55_252Z-debug.log

我的 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",
    "build": "webpack -p"
  },
  "devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^4.5.3",
    "cross-env": "^7.0.2",
    "jquery": "^3.5",
    "laravel-mix": "^5.0.7",
    "lodash": "^4.17.20",
    "popper.js": "^1.12",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.5",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "bootstrap-vue": "^2.18.1",
    "copy-webpack-plugin": "^5.1.1",
    "node-sass": "^5.0.0",
    "vue-router": "^3.4.8",
    "vue-router-dom": "^1.0.0-beta.1",
    "vuex": "^3.5.1",
    "webpack": "^5.4.0"
  },
  "name": "school",
  "description": "<p align=\"center\"><img src=\"https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
  "version": "1.0.0",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "author": "",
  "license": "ISC"
}

我已尝试按照此链接中的步骤进行操作，但没有成功 why I can not run npm run dev successfully in Laravel 7?
https://github.com/JeffreyWay/laravel-mix/issues/1072
webpack.js is not found in laravel vue app? 。我对 webpack 一无所知，已经研究这个好几天了

Answer 1

不确定您是否已经找到解决方案，但我刚刚遇到了这个问题并设法修复了它。

1. rm -rf node_modules/
2. rm package.lock
3. 从 package.json 中删除 "webpack": "^5.4.0"
4. npm 安装

您可能只需使用 npm uninstall webpack 就可以摆脱困境，但之后可能需要再次运行 npm install。

基本上 laravel-mix 在底层使用 webpack 4，因此在其上安装 webpack 5 会发生冲突，并引发与 laravel-mix 中包含的 webpack 配置文件中已删除/替换的指令相关的错误。

由于 NPM ENOENT 错误，我最终手动安装了 webpack，我假设是因为在 Windows 下运行 vagrant/homestead 框。切换到yarn而不是npm让我可以毫无问题地安装所有东西。然后，如果需要，我可以使用 npm 运行任何命令。