[6.0.0-beta.14] [webpack-cli] Invalid configuration object.

[veerman72]

• Laravel Mix Version: 6.0.0-beta.14
• Node Version (node -v): v15.3.0
• NPM Version (npm -v): 7.0.14
• OS: macOS Big Sur (11.0.1)

Description:

I have been using Laravel Mix Version 6 since a few weeks to experiment with Laravel 8, Vue3 and Tailwind (v2 since release). Suddenly from Nov, 17th npm run dev gives the following error:

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.optimization.splitChunks.cacheGroups['styles-public/css/app'] has an unknown property 'type'. These properties are valid:
   object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? }
 - configuration.output.chunkFilename should be a string.
   -> The filename of non-entry chunks as relative path inside the `output.path` directory.
 - configuration.stats has an unknown property 'preset'. These properties are valid:
   object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }

Steps To Reproduce:

I have made a fresh install of Laravel 8 (Inertia-stack) and installed Tailwind CSS v1. After npm run dev everything worked well. After this I have updated Tailwind CSS to v2 and to get use of PostCSS 8 I have updated Laravel-Mix to 6.0.0-beta.14. This gives the same result

[thecrypticace]

I think this is a problem with installs using npm 7 installing webpack 4 instead of webpack 5. Can you try npm install --legacy-peer-deps ?

[veerman72]

after npm install --legacy-peer-deps I have tried npm run dev and got a question CLI for webpack must be installed. I replied yes and installation fails with error Cannot find module 'webpack-cli/package.json'

Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- /Users/veerman/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:15)
    at Function.resolve (node:internal/modules/cjs/helpers:98:19)
    at runCli (/Users/veerman/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:50:26)
    at /Users/veerman/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:139:5
    at processTicksAndRejections (node:internal/process/task_queues:93:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/veerman/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js'
  ]
}

[veerman72]

adding "webpack": "^5.9.0" to devDependencies in my package.json did the trick.

[bkilshaw]

I ran into this same problem, and adding "webpack": "^5.9.0" fixed it as well. I don't think this should be necessary though, shouldn't laravel-mix handle it's own dependencies?

[Oluwa-Pelumi]

Upgrading to ^5.23.0 worked for me.

[corbosman]

The problem for me was old versions of sass and sass-loader which prevented newer versions of webpack to be installed. Remove sass and sass-loader and let mix reinstall them.

[andymnc]

In my case, with node v15.11.0 and npm 7.6.3
I had to:

• add "webpack": "^5.23.0"in package.json
• npm uninstall sass
• npm uninstall sass-loader
• rm -rf node_modules
• rm package-lock.json yarn.lock
• npm cache clear --force
• npm install

And npm run dev worked eventually.

[alexmck]

@andymnc's steps above fixed my issues too. But if you are using less you will also need to remove it too:

• npm uninstall less
• npm uninstall less-loader

[erhanyasar]

Even I was able to solve the issue from what I get via the comments above, I'd like to bring a small explanation for newcomers. In my case, webpack.mix.js for Laravel and the webpack config for storybook under .storybook/main.js conflicts.

So that when I intend to run yarn hot, it redirects to line asking if I want to install webpack-cli and then webpack-dev-server. Even first one successfully accomplishes, webpack-dev-server exits with the error below;

After trying a couple of possible fixes which can be found when it's searched with the error topic I got above, I found out only installing webpack as a dependency solves it totally. That means in my case yarn add webpack but you might use npm i webpack if you prefer npm over yarn as a package manager.

Then you're all good to go and not necessarily install neither webpack-cli nor webpack-dev-server as when you intend to run yarn hot or similarly any command to get your project up & running. There're more issues I'd like to mention here since some of the issues around the same topic just mentions as it's only related to an empy string at the beginning of the extensions array property of webpack.config.js like this one.

[MichaelBelgium]

I got the same error while upgrading to laravel 8 (yes i'm late, wanted to update all npm packages too), node v16.13 (LTS), npm v8.1.2

In my case, with node v15.11.0 and npm 7.6.3 I had to:

• add "webpack": "^5.23.0"in package.json
• npm uninstall sass
• npm uninstall sass-loader
• rm -rf node_modules
• rm package-lock.json yarn.lock
• npm cache clear --force
• npm install

And npm run dev worked eventually.

This fixed it but I didn't even had to require webpack in package.json
sass-loader conflicted with webpack, it required webpack version 3 or something, and wasn't compatible with webpack 5

[hugopedro]

In my case, with node v15.11.0 and npm 7.6.3 I had to:

• add "webpack": "^5.23.0"in package.json
• npm uninstall sass
• npm uninstall sass-loader
• rm -rf node_modules
• rm package-lock.json yarn.lock
• npm cache clear --force
• npm install

And npm run dev worked eventually.

Great, It works now.

[aullah]

I've been facing this issue too but thanks to all the helpful replies above, I was able to resolve this swiftly.

I had updated the Node and NPM versions to v18.2.0 and 8.9.0 respectively, then updated Laravel Mix from 4.1 to 6.0 when I began to encounter this issue.

To resolve the issue, I executed the following commands:

npm uninstall sass
npm uninstall sass-loader
rm -rf node_modules
npm install
npm install webpack

It seems webpack isn't being automatically pulled in as a dependency for Laravel Mix, but that has done the trick.

Thank you everyone. 👍