Laravel 项目中的“npm run hot”抛出无效配置错误

Posted 2023-02-22

【中文标题】Laravel 项目中的“npm run hot”抛出无效配置错误

【英文标题】："npm run hot" in Laravel project throws invalid configuration error

【发布时间】：2021-10-19 04:48:18

【问题描述】：

我有一个带有vue.js 的laravel 项目，当我尝试执行npm run hot 时会引发错误。

OS: Windows 10
phpStorm: 2021.2
Vue.js: 3.1.5
Laravel: 8

项目依赖（npm list --depth 0）：

+-- axios@0.21.1
+-- laravel-mix@6.0.27
+-- lodash@4.17.21
+-- postcss@8.3.6
`-- vue@3.1.5

终端输出：

> mix watch --hot


* Mix █████████████████████████  (0%)


[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema
.
 - configuration has an unknown property 'webpackbar'. These properties are valid:
   object  bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveRe
load?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, tran
sportMode?, watchFiles? 
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ hot: `mix watch --hot`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ hot 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\Username\AppData\Roaming\npm-cache\_logs\2021-08-17T08_43_49_956Z-debug.log

日志文件：

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'hot'
1 verbose cli ]
2 info using npm@6.14.14
3 info using node@v14.17.4
4 verbose run-script [ 'prehot', 'hot', 'posthot' ]
5 info lifecycle @~prehot: @
6 info lifecycle @~hot: @
7 verbose lifecycle @~hot: unsafe-perm in lifecycle true
8 verbose lifecycle @~hot: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Username\PhpstormProjects\mywebsite.com\node_modules\.bin;C:\Users\Username\PhpstormProjects\mywebsite.com\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\ProgramData\chocolatey\bin;;C:\Program Files\gettext-iconv\bin;C:\PHP;C:\ProgramData\ComposerSetup\bin;C:\HashiCorp\Vagrant\bin;C:\Users\Username\AppData\Local\Microsoft\WindowsApps;C:\Program Files\heroku\bin;C:\Program Files\JetBrains\PhpStorm 2021.1.4\bin;C:\Program Files (x86)\GnuWin32\bin;C:\Users\Username\AppData\Roaming\npm;C:\Users\Username\AppData\Roaming\Composer\vendor\bin
9 verbose lifecycle @~hot: CWD: C:\Users\Username\PhpstormProjects\mywebsite.com
10 silly lifecycle @~hot: Args: [ '/d /s /c', 'mix watch --hot' ]
11 silly lifecycle @~hot: Returned: code: 2  signal: null
12 info lifecycle @~hot: Failed to exec hot script
13 verbose stack Error: @ hot: `mix watch --hot`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd C:\Users\Username\PhpstormProjects\mywebsite.com
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "hot"
18 verbose node v14.17.4
19 verbose npm  v6.14.14
20 error code ELIFECYCLE
21 error errno 2
22 error @ hot: `mix watch --hot`
22 error Exit status 2
23 error Failed at the @ hot script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

This recent post好像也有类似的问题没有解决办法。

尝试的解决方案（同样的错误） - 将此代码添加到 webpack.mix.js:

mix.override(config => 
    // Apply a workaround caused by Laravel Mix using the `webpack-dev-server@v4.0.0-beta`:
    // https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.3.
    // Basically the `dev` property has been deprecated in favor of `devMiddleware`.
    if (config.devServer) 
        config.devServer.devMiddleware = config.devServer.dev;
        delete config.devServer.dev;
    
);

【参考方案1】：

兼容性版本有问题，包@webpack-cli/serve 1.5.2版本。

删除你的 node_modules 文件夹和 package-lock.json。

在你的 package.json 中添加这个：

"@webpack-cli/serve": "1.5.1",

“webpack-cli”：“4.7.2”

运行 npm install

运行 npm run hot

它适用于“laravel-mix”：“6.0.27”。