Laravel - "Npm run hot" not working and giving me this error

Question

I was trying to use the command "npm run hot," but instead of executing the command, it gives me this error:

[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 'dev'. These properties are valid:
   object { bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, 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\Sander\AppData\Roaming\npm-cache\_logs\2021-05-07T14_39_33_713Z-debug.log

What am I doing wrong here?

The logfile shows me this message:

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.11
3 info using node@v14.16.0
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:\xampp\htdocs\todo-app-vue-laravel\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\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files\nodejs\;E:\Python\Scripts\;E:\Python\;C:\Users\Sander\AppData\Local\Microsoft\WindowsApps;;E:\Microsoft VS Code\bin;C:\Users\Sander\AppData\Roaming\Composer\vendor\bin;C:\Users\Sander\AppData\Roaming\npm
9 verbose lifecycle @~hot: CWD: C:\xampp\htdocs\todo-app-vue-laravel
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:315:20)
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:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd C:\xampp\htdocs\todo-app-vue-laravel
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.16.0
19 verbose npm  v6.14.11
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 ]

And last, this is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "audit": "0.0.6",
        "commander": "^7.2.0",
        "fix": "0.0.6",
        "npm": "^7.12.0",
        "vue": "^2.6.12"
    }
}

I have tried a couple of methods from the internet to solve the problem, but nothing seems to work yet. Hopefully someone knows a fix to this. All of the other commands seem to be fine and can be executed, it's only the "hot" command that throws out this error.

Answer 1

It's a known issue, in order to fix this you have to add the following code to your 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;
    }
});

Credits to: github.com/JeffreyWay/laravel-mix/issues/2964