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

Created on 29 Nov 2020  路  8Comments  路  Source: JeffreyWay/laravel-mix

  • 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

Most helpful comment

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

All 8 comments

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 ?

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'
  ]
}

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

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?

Upgrading to ^5.23.0 worked for me.

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.

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.

@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
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Cheddam picture Cheddam  路  3Comments

nezaboravi picture nezaboravi  路  3Comments

terion-name picture terion-name  路  3Comments

sdebacker picture sdebacker  路  3Comments

hasnatbabur picture hasnatbabur  路  3Comments