在Laravel项目中运行热NPM引发无效配置错误(&Q；；NPM) [英] "npm run hot" in Laravel project throws invalid configuration error

问题描述

我有一个laravel项目，vue.js，尝试执行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:UsersUsernameAppDataRoaming
pm-cache\_logs2021-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
odejs
ode_modules
pm
ode_modules
pm-lifecycle
ode-gyp-bin;C:UsersUsernamePhpstormProjectsmywebsite.com
ode_modules.bin;C:UsersUsernamePhpstormProjectsmywebsite.com
ode_modules.bin;C:WINDOWSsystem32;C:WINDOWS;C:WINDOWSSystem32Wbem;C:WINDOWSSystem32WindowsPowerShellv1.0;C:WINDOWSSystem32OpenSSH;C:Program FilesIntelWiFiin;C:Program FilesCommon FilesIntelWirelessCommon;C:Program FilesGitcmd;C:Program Files
odejs;C:ProgramDatachocolateyin;;C:Program Filesgettext-iconvin;C:PHP;C:ProgramDataComposerSetupin;C:HashiCorpVagrantin;C:UsersUsernameAppDataLocalMicrosoftWindowsApps;C:Program Filesherokuin;C:Program FilesJetBrainsPhpStorm 2021.1.4in;C:Program Files (x86)GnuWin32in;C:UsersUsernameAppDataRoaming
pm;C:UsersUsernameAppDataRoamingComposervendorin
9 verbose lifecycle @~hot: CWD: C:UsersUsernamePhpstormProjectsmywebsite.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
odejs
ode_modules
pm
ode_modules
pm-lifecycleindex.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (C:Program Files
odejs
ode_modules
pm
ode_modules
pm-lifecyclelibspawn.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:UsersUsernamePhpstormProjectsmywebsite.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;
    }
});

推荐答案

兼容版本有问题，包@webpack-cli/在1.5.2版本上服务。

1. 删除node_module文件夹和package-lock.json。

2. 将此内容添加到您的包中。json：

   &q；@webpack-cli/服务&q；：&q；1.5.1&q；，

   &Q；webpack-cli&q；：&q；4.7.2&q；

3. 运行NPM安装

4. 运行NPM热运行

它与"；laravel-Mix"；："；6.0.27"；配合使用。

这篇关于在Laravel项目中运行热NPM引发无效配置错误(&Q；；NPM)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！