node -v): v15.3.0npm -v): 7.0.14I 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? }
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
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:
"webpack": "^5.23.0"in package.jsonnpm uninstall sassnpm uninstall sass-loaderrm -rf node_modulesrm package-lock.json yarn.locknpm cache clear --forcenpm installAnd 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 lessnpm uninstall less-loader
Most helpful comment
adding
"webpack": "^5.9.0"to devDependencies in my package.json did the trick.