laravel-mix: Unexpectedly fails with postcss-loader v4.0.0

Error I’m seeing with postcss-loader v4.0.0:

ERROR in ./assets/scss/style.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 36
Comments: 25

Commits related to this issue

Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago
Add postcss-loader v3 Specify the version due to: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. See: https... — committed to jibees/openfoodnetwork by jibees 3 years ago

Most upvoted comments

I have the same problem here. Downgraded to postcss-loader v3 to work (not ideal, but does the job for now):

npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

+78

daniel-cintra on Sep 9, 2020

I don’t use laravel-mix, but this is one of the few places I saw this error talked about, so adding comments on how I resolved it.

postcss-loader 4 seems to require postcss 8.x, but when I did the upgrade from 3 to 4, postcss was not upgraded automatically. Explicitly upgrading to postcss 8 and making the necessary changes to the postcss.config.js format (specifically plugins: {} to postcssOptions: { plugins: [] }) fixed this problem up for me.

Hope that helps somebody.

+64

thegrandpoobah on Sep 30, 2020

This is fixed in the upcoming release.

JeffreyWay on Oct 4, 2020

… did they remove stat presets? I’ll take a look this weekend. 😐

thecrypticace on Nov 20, 2020

When I tried using tailwind v2.0 with laravel-mix 6.0.0-beta.14 and postcss ^8.1.7 with postcss-loader ^4.1.0 with updated postcss.config.js, but this time I’m getting:

[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/assets/css/admin/editor'] 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? }

Has the fix already been added to beta version?

sebastiansulinski on Nov 19, 2020

Yeah I did the same but still getting this error when I run npm run development

[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-css/theme'] 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’m getting the same errors using npx mix

I had to manually npm install version 5 of webpack.

These errors are bcause laravel-mix’s default webpack config is incompatible with Webpack 4 which I had previously

djaxho on Nov 27, 2020