Incompatible with Create-React-App 5.0: Invalid Options for PostCSS Loader

[Eridanus Sora]

• customize-cra version: 1.0.0
• create-react-app version: 5.0.0

There wil be a critical error when using addLessLoader.

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?, implementation? }
    at validate (D:\Git\Shiny-Console\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (D:\Git\Shiny-Console\node_modules\webpack\lib\NormalModule.js:578:19)
    at Object.loader (D:\Git\Shiny-Console\node_modules\postcss-loader\dist\index.js:40:24)

[Chalkzhu]

Hi, I also encountered this problem.

[Dev.Casamia]

I've wrote lessLoader_forCRA5

https://gist.github.com/casamia918/43b1d513de8fb36b364b403bda0034da

Use this one, rather than lessLoader from customize-cra@1.0.0

[mushan0x0]

You can add the following code to the configuration.

// config-overrides.js
config.module.rules.forEach(item => {
  if (item.oneOf) {
    item.oneOf.forEach(item => {
      item.use?.forEach(item => {
        if (
          item.loader?.includes('postcss-loader') &&
          !item?.options?.postcssOptions
        ) {
          const postcssOptions = item.options;
          item.options = { postcssOptions };
        }
      });
    });
  }
})

[John Yang]

There is a workaround with adjustStyleLoaders.

adjustStyleLoaders(({ use: [, , postcss] }) => {
  const postcssOptions = postcss.options;
  postcss.options = { postcssOptions };
})

Remember to put adjustStyleLoaders after addLessLoader in override chain.

[xiaopujun]

There is a workaround with adjustStyleLoaders.

adjustStyleLoaders(({ use: [, , postcss] }) => {
  const postcssOptions = postcss.options;
  postcss.options = { postcssOptions };
})

Remember to put adjustStyleLoaders after addLessLoader in override chain.

This method solves the problem, but the project starts with a lot of warnings and css reference errors. It does not affect the normal development of the project though.

[Typec]

You could write it like this

module.exports = {
  webpack: override(
    addWebpackModuleRule({
      test: [/\.css$/, /\.less$/],
      use: ['style-loader', 'css-loader', 'postcss-loader', { loader: 'less-loader' }]
    })
  )
}

[mangoyi]

There is a workaround with adjustStyleLoaders.

adjustStyleLoaders(({ use: [, , postcss] }) => {
  const postcssOptions = postcss.options;
  postcss.options = { postcssOptions };
})

Remember to put adjustStyleLoaders after addLessLoader in override chain.

nice ways, solved my problem.

[Andy Eastwood]

You could write it like this

module.exports = {
  webpack: override(
    addWebpackModuleRule({
      test: [/\.css$/, /\.less$/],
      use: ['style-loader', 'css-loader', 'postcss-loader', { loader: 'less-loader' }]
    })
  )
}

amazing!!! works like a charm! 🥳 🥳 🥳 🥳 🥳