Webpack has been initialized using a configuration object that does not match the API schema in Laravel 7 using Vue Js

Question

I am working on a project using laravel 7 and Vue Js but suddenly my program stop compiling whenever i type npm run watch or npm run dev i get the following error Error code

> school@1.0.0 development C:\xampp4\htdocs\school
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:281
                                throw err;
                                ^

ValidationError: 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 { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.
    at validate (C:\xampp4\htdocs\school\node_modules\webpack\node_modules\schema-utils\dist\validate.js:104:11)
    at validateSchema (C:\xampp4\htdocs\school\node_modules\webpack\lib\validateSchema.js:73:2)
    at create (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:102:3)
    at webpack (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:139:31)
    at f (C:\xampp4\htdocs\school\node_modules\webpack\lib\index.js:35:15)
    at processOptions (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:272:16)
    at yargs.parse (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:364:3)
    at Object.parse (C:\xampp4\htdocs\school\node_modules\yargs\yargs.js:576:18)
    at C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCli (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:54:2)
    at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:140:2)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:282:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! school@1.0.0 development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the school@1.0.0 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!     C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_066Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! school@1.0.0 dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the school@1.0.0 dev 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\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_176Z-debug.log

C:\xampp4\htdocs\school>install -g n
'install' is not recognized as an internal or external command,
operable program or batch file.

C:\xampp4\htdocs\school>npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@6.7.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T20_04_55_252Z-debug.log

my Package.json is shown below:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --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 --disable-host-check --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build": "webpack -p"
  },
  "devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^4.5.3",
    "cross-env": "^7.0.2",
    "jquery": "^3.5",
    "laravel-mix": "^5.0.7",
    "lodash": "^4.17.20",
    "popper.js": "^1.12",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.5",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "bootstrap-vue": "^2.18.1",
    "copy-webpack-plugin": "^5.1.1",
    "node-sass": "^5.0.0",
    "vue-router": "^3.4.8",
    "vue-router-dom": "^1.0.0-beta.1",
    "vuex": "^3.5.1",
    "webpack": "^5.4.0"
  },
  "name": "school",
  "description": "<p align=\"center\"><img src=\"https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
  "version": "1.0.0",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "author": "",
  "license": "ISC"
}

I have tried following the steps in the this links but no success why I can not run npm run dev successfully in Laravel 7?
https://github.com/JeffreyWay/laravel-mix/issues/1072
webpack.js is not found in laravel vue app?. I have no idea on webpack and have been on this for days now please

Answer 1

Not sure if you've managed to find a solution for this yet or not, but I just ran into it and managed to fix it on my end.

1. rm -rf node_modules/
2. rm package.lock
3. Remove "webpack": "^5.4.0" from your package.json
4. npm install

You can probably get away with just npm uninstall webpack, but might need to run npm install again after.

Basically laravel-mix is using webpack 4 under the hood, so installing webpack 5 on top of it conflicts and throws errors related to removed/replaced directives in the webpack config file included in laravel-mix.

I ended up manually installing webpack due to NPM ENOENT errors, I'm assuming due to running the vagrant/homestead box under Windows. Switching to yarn instead of npm allowed me to install everything without issue. I can then use npm to run whatever commands, if necessary.

Answer 2

In your webpack.config.js file try to change loaders to rules. It seems that in Webpack 2 loaders has been replaced with rules.

See this post