在Laravel项目中运行热NPM引发无效配置错误(&Q;;NPM)

本教程将介绍在Laravel项目中运行热NPM引发无效配置错误(&Q;;NPM)的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在Laravel项目中运行热NPM引发无效配置错误(&Q;;NPM) 教程 第1张

问题描述

我有一个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 Filesnodejsnode.exe',
1 verbose cli'C:Program Filesnodejsnode_modulesnpmbinnpm-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 Filesnodejsnode.exe" "C:Program Filesnodejsnode_modulesnpmbinnpm-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版本上服务。

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

    将此内容添加到您的包中。json:

    &q;@webpack-cli/服务&q;:&q;1.5.1&q;,

    &Q;webpack-cli&q;:&q;4.7.2&q;

    运行NPM安装

    运行NPM热运行

它与&quot;laravel-Mix&quot;:&quot;6.0.27&quot;配合使用。

好了关于在Laravel项目中运行热NPM引发无效配置错误(&Q;;NPM)的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。