Breaks build when used with CKEditor5 styles

[udyux]

We're trying to update CKEditor5 to v34 in our Nuxt apps. One of the major changes was a switch to PostCSS 8. Following the instructions for this package breaks our build in a peculiar way.

We had it working working with CKEditor5 v33 and PostCSS 7. Our current version of Nuxt is 2.15.8.

The only difference between our previous and current config is the addition of @nuxt/postcss8 in buildModules. Here is the relevant part in our current nuxt.config.ts:

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

export default {
  // ...
  build: {
    // ...
    transpile: [
      /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
    ],
    plugins: [
      new CKEditorWebpackPlugin({
        language: "en",
        additionalLanguages: ['fr'],
        buildAllTranslationsToSeparateFiles: true
      })
    ],
    postcss: styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
      },
      minify: true
    }),
    extend(config) {
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"]
      });
    }
  },
  buildModules: [
    ["@nuxt/typescript-build", {
      ignoreNotFoundWarnings: true,
      typescript: {
        typeCheck: {
          memoryLimit: 150,
          workers: 1
        }
      }
    }],
    "@nuxtjs/moment",
    '@nuxtjs/gtm',
    "@nuxt/postcss8",
    'vue-browser-detect-plugin/nuxt'
  ],
  // ...
}

The error output when we run nuxt build:

FATAL  Cannot find module '0'
Require stack:
- [...]/platform/clients/event_website/node_modules/@nuxt/core/dist/core.js

  Require stack:
  - node_modules/@nuxt/core/dist/core.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
  at Function.resolve (internal/modules/cjs/helpers.js:107:19)
  at _resolve (node_modules/jiti/dist/jiti.js:1:192841)
  at Resolver.jiti [as _require] (node_modules/jiti/dist/jiti.js:1:195025)
  at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29)
  at node_modules/@nuxt/webpack/dist/webpack.js:792:58
  at Array.map (<anonymous>)
  at PostcssConfig.loadPlugins (node_modules/@nuxt/webpack/dist/webpack.js:791:10)
  at PostcssConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:830:14)
  at StyleLoader.postcss (node_modules/@nuxt/webpack/dist/webpack.js:909:39)
  at StyleLoader.apply (node_modules/@nuxt/webpack/dist/webpack.js:969:12)
  at WebpackClientConfig.rules (node_modules/@nuxt/webpack/dist/webpack.js:1357:28)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1537:21)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
  at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
  at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)

If "@nuxt/postcss8" or the postcss configuration postcss: styles.getPostCssConfig({ are removed the error disappears.

The only changes to the dependancies are @nuxt/postcss8 and the various CKEditor5 packages updated to latest. May be worth noting that the exact same error occurs with CKEditor5 v33 as soon as @nuxt/postcss8 is added.

[udyux]

After digging a bit, I can see that part of the issue is caused by styles.getPostCssConfig() provided by "@ckeditor/ckeditor5-dev-utils" returning an array of plugins. I set up a reducer to to convert to an object using the postcssPlugin as keys, however issues persist.

"@ckeditor/ckeditor5-dev-utils" is returning an array of objects that look like this example:

{
  postcssPlugin: 'postcss-ckeditor5-theme-importer',
  Once( root, { result } ) {
    // Clone the options, don't alter the original options object.
    const options = Object.assign( {}, pluginOptions, {
      debug: pluginOptions.debug || false,
      postCssOptions: {
        plugins: [
          require( 'postcss-import' )(),
          require( './themelogger' )()
        ]
      },
      root, result
    } );

    return importThemeFile( options );
  }
}

From what I can make out the plugins themselves are provided and should not be imported via require as they do not exist in node_modules.

This approach was functioning until @nuxt/postcss8 was added. I feel as though I'm approaching the limits of my understanding of the config generation. Any insight will be greatly appreciated.