webpack.code build is broken after update postcss-loader from 3.0.0 to 4.1.0

Question

I'm using lates webpack 4 (not 5) with latest CkEditor 5 and postcss-loader. Everything is fine, when I use postcss-loader 3.0.0. After update it to 4.1.0 I got this error message:

"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'."

My webpack.config is:

        {
            stats: {
                modules: false
            },
            context: __dirname,
            entry: {
                shopApp: [
                    './node_modules/zooming/build/zooming.min.js',
                    jsRoot + 'shop/index.js'
                ]
            },
            output: {
                path: path.join(__dirname, wwwroot + 'dist/js'),
                filename: '[name].min.js',
                chunkFilename: '[name].[chunkhash].min.js',
                publicPath: '/dist/js/'
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        loader: 'babel-loader?cacheDirectory=true',
                        exclude: file => /node_modules/.test(file),
                        query: {
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: "> 2% and last 2 versions"
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        test: /\.svg$/,
                        use: [ 'raw-loader' ]
                    },
                    {
                        test: /\.css$/,
                        use: [
                            {
                                loader: 'style-loader',
                                options: {
                                    injectType: 'singletonStyleTag',
                                    attributes: {
                                        'data-cke': true
                                    }
                                }
                            },
                            {
                                loader: 'postcss-loader',
                                options: styles.getPostCssConfig( {
                                    themeImporter: {
                                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                    },
                                    minify: true
                                } )
                            }
                        ]
                    }
                ]
            },
            devtool: isDevBuild ? 'eval-source-map' : false,
            plugins: [
                new Webpack.DefinePlugin({
                    'process.env': {
                        NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                    }
                }),
                new CKEditorWebpackPlugin( {
                    // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor-webpack.js).
                    language: 'en',
                    addMainLanguageTranslationsToAllAssets: true
                })
            ]
        }

So yes I have plugins, but this is a must. I even don't know what's wrong with plugins and postcss-loader 4.1.0.

Please advice!

Answer 1

postcss-loader v4 has many breaking changes https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0.

For example,

PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option

I believe passing that styles.getPostCssConfig to postcssOptions should hopefully fix your problem:

loader: 'postcss-loader',
options: {
  postcssOptions: styles.getPostCssConfig({})
}

Answer 2

If you are using a antd custom theme, and the configuration file is the config - overrides. Js, maybe you can refer to https://github.com/arackaf/customize-cra/issues/315