webpack-cli Invalid configuration object - vue.js

Question

I have laravel 5.8 installed and I want to use vue in it. I tried running following commands.
I am running it on ubuntu, node version is 10.19.
1. npm install
2. npm run watch
First command runs okay and gave some warnings. When I run npm run watch I get following errors.
I am kind of new so any help is appreciated.
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[10] has an unknown property 'loaders'. These properties are valid:
object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development 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! /home/admin/.npm/_logs/2021-12-07T09_49_10_144Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # watch: `npm run development -- --watch`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # watch script.
npm ERR! This is probably not a problem with npm.
My package.json is as follows
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.24.0",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.44.0",
"sass-loader": "^7.3.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {}
}

Answer 1

Installing "webpack": "^5.41.1" with npm i -S webpack#latest will fix this issue.