Ckeditor5: postcss-loader issue: options has an unknown property 'plugins'.

[caramdache]

📝 Provide detailed reproduction steps (if any)

I've been trying to update from release 22.0 to release 23.0 and I get the following error for each module: options has an unknown property 'plugins'. (see details below).

I've narrowed down the issue to the following change, from:

    "postcss-loader": "^3.0.0",

to (as suggested by the online builder):

    "postcss-loader": "^4.0.3",

Steps to reproduce:

1. Make the above change
2. rm -f package-lock.json && rm -rf node_modules && npm install
3. ./webpack --mode production

✔️ Expected result

No error during build.

❌ Actual result

ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css (./node_modules/postcss-loader/dist/cjs.js??ref--5-1!./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css)
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? }
    at validate (/var/www/django/djpat/cke/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.loader (/var/www/django/djpat/cke/node_modules/postcss-loader/dist/index.js:43:29)
 @ ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css 2:26-102
 @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkactionsview.js
 @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js
 @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js
 @ ./src/ckeditor.js

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[FilipTokarski]

Hi, could you share your editor config and webpack config as well? But I'm guessing that in your postcss loader you might have:

loader: 'postcss-loader',
                        options: {
                             plugins: []
                        }

instead of:

loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: []
                            }
                        }

[caramdache]

Actually I didn't have this:

loader: 'postcss-loader',
                        options: {
                             plugins: []
                        }

but this (from a previous online builder):

                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )

which I have now updated to (as suggested by the latest online builder):

                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }

This seems to work fine, except for this error repeated as many times as there are plugins:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

What am I missing? Should the online builder be updated?

[caramdache]

Everything seems to be in order after I ran:

rm -f package-lock.json && rm -rf node_modules && npm install

Thanks for the advice!

[wyattoday]

The documentation should be updated here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-extracting-css

Fixing it as @caramdache writes above.