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

Question

我有一个带有 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\_logs21-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;
    }
});

Answer 1

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

删除您的 node_modules 文件夹和包-lock.json.
将此添加到您的 package.json 中：

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

"webpack-cli": "4.7.2"
运行 npm install
运行 npm 运行热门

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

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

"npm run hot" in Laravel project throws invalid configuration error

php

laravel

vue.js

npm

phpstorm