Laravel React CKEditor5 webpack

webpack.mix.js

const mix = require('laravel-mix');

const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles

const CKERegex = {
  svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
  css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
}

Mix.listen('configReady', webpackConfig => {
  const rules = webpackConfig.module.rules
  const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/
  const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/
  const targetCSS = /\.p?css$/

  // Exclude CK Editor regex from mix's default rules
  for (let rule of rules) {
    // console.log(rule.test.toString())
    if (rule.test.toString() === targetSVG.toString()) {
      // console.log(1, rule.test.toString())
      rule.exclude = CKERegex.svg
    } else if (rule.test.toString() === targetFont.toString()) {
      // console.log(2, rule.test.toString())
      rule.exclude = CKERegex.svg
    } else if (rule.test.toString() === targetCSS.toString()) {
      // console.log(3, rule.test.toString())
      rule.exclude = CKERegex.css
    }
  }
})

/**
 * Webpack Config for CK Editor
 */
mix.webpackConfig({
  module: {
    rules: [
      {
        test: CKERegex.svg,
        use: ['raw-loader']
      },
      {
        test: CKERegex.css,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: CKEStyles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          }
        ]
      }
    ]
  }
})

 mix.js('resources/js/app.js', 'public/js')
 .react()
 .css('resources/css/app.css', 'public/css');