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

[danielbachhuber]

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? }

[danielbachhuber]

Worth noting: I'm using Tailwind, so it might be the presence of a PostCSS plugin that causes the error.

[daniel-cintra]

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

[Alex-ray]

Same here

[MMcKester]

Same here, but downgrading worked fine

[jornwildenbeest]

Downgrading postcss-loader to 3.0.0 worked for me to

[thegrandpoobah]

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.

[JeffreyWay]

This is fixed in the upcoming release.

[fxkopp]

Downgrading to postcss-loader@~3.0.0 only gives me a TypeError: text.forEach is not a function error.

Which release of laravel-mix should be used to get that error fixed? Thanks!

[sebastiansulinski]

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?

[thecrypticace]

… did they remove stat presets? I'll take a look this weekend. :|

[GabeAC]

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?

same issue as well

[vladoa]

Same problem here, trying to use Tailwind 2.0.1 with Laravel Mix

[flavinus12]

I fixed the problem by updating laravel-mix to version 6. See the page: https://laravel-mix.com/docs/6.0/workflow

and I changed the scripts of the file"package.json" by:
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
},

[vladoa]

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? }

[flavinus12]

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? }
  `
  If you change the script 'see <https://laravel-mix.com/docs/6.0/upgrade>
  you just execute "npx mix" or "npx mix watch".

[lansator]

I was able to use tailwind 2 with laravel-mix only after upgrading node (from v.10 to v.13).

[djaxho]

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

[codevvvv9]

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.

it's good

[Furqan311]

I had the same problem, i have solved it the moment when i have realized that i have been using Node version 10.21 something. Then i google the problem and found that most of the functionalities within the post-css-loader are introduced in Node 11.
Then i upgraded the Nod version and problem is solved.

[diosby]

I had the same probrem when I had laravel-mix v5. I updated to v6 and the problem was gone.

"tailwindcss": "^2.0.2", "laravel-mix": "^6.0.11", "webpack-cli": "^4.1.0" "postcss": "^8.2.1", "postcss-import": "^12.0.1", "postcss-loader": "^4.2.0", "@tailwindcss/forms": "^0.2.1",

[javanyou]

Update laravel-mix to version 6.0 can fix problem. @diosby

yarn add laravel-mix@\^6.0.16

[f3ltron]

still have errors it's a bit annoying to not think about that when speaking about migration...

Module parse failed: Unexpected token (177:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

<style scoped lang="postcss">
.picked-for-you {
    height: fit-content;
    @apply bg-red-regular;
}
</style>