CKEditor5 v.32 on Laravel 8 / Laravel Mix 6

Question

Does anybody have a working webpack.mix.js config for CKEditor5 32 on Laravel 8 (Laravel Mix 6 and Webpack 5) already? I have been banging my head to the wall for the past 8 hours and still could not manage to make it work.

Here is the console error I receive.

Before, when I was using Laravel Mix 5 and Webpack 4, this config solution seemed to be working.

But now all I get are a bunch of the same errors during npm compilation.

Answer 1

The Mix.listen() was deprecated and will go away in a future release. should replaced by mix.override().

Thanks @bakis. This is the only working version after hours of searching. Exclude CKEditor regex from mix's default rules is the key neglected.

    /**  ckeditor 5 webpack config ****/
    const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
    const CKEditorStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
    //Includes SVGs and CSS files from "node_modules/ckeditor5-*" and any other custom directories
    const CKEditorRegex = {
      svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, //If you have any custom plugins in your project with SVG icons, include their path in this regex as well.
      css: /ckeditor5-[^/\\]+[/\\].+\.css$/,
    };

    mix.webpackConfig({
      plugins: [
        new CKEditorWebpackPlugin({
          language: 'en',
          addMainLanguageTranslationsToAllAssets: true
        }),
      ],
      module: {
        rules: [
          {
            test: CKEditorRegex.svg,
            use: ['raw-loader']
          },
          {
            test: CKEditorRegex.css,
            use: [
              {
                loader: 'style-loader',
                options: {
                  injectType: 'singletonStyleTag',
                  attributes: {
                    'data-cke': true
                  }
                }
              },
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: CKEditorStyles.getPostCssConfig({
                    themeImporter: {
                      themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                  })
                }
              }
            ]
          }
        ]
      }
    });

    //Exclude CKEditor regex from mix's default rules
    mix.override(config => {
      const rules = config.module.rules;
      const targetSVG = (/(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/).toString();
      const targetFont = (/(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/).toString();
      const targetCSS = (/\.p?css$/).toString();

      rules.forEach(rule => {
        let test = rule.test.toString();
        if ([targetSVG, targetFont].includes(rule.test.toString())) {
          rule.exclude = CKEditorRegex.svg;
        } else if (test === targetCSS) {
          rule.exclude = CKEditorRegex.css;
        }
      });
    });

Answer 2

Config's snipped that worked for me

const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEditorStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
//Includes SVGs and CSS files from "node_modules/ckeditor5-*" and any other custom directories
const CKEditorRegex = {
    svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, //If you have any custom plugins in your project with SVG icons, include their path in this regex as well.
    css: /ckeditor5-[^/\\]+[/\\].+\.css$/,
};

//Exclude CKEditor regex from mix's default rules
Mix.listen('configReady', config => {
    const rules = config.module.rules;
    const targetSVG = (/(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/).toString();
    const targetFont = (/(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/).toString();
    const targetCSS = (/\.p?css$/).toString();

    rules.forEach(rule => {
        let test = rule.test.toString();
        if ([targetSVG, targetFont].includes(rule.test.toString())) {
            rule.exclude = CKEditorRegex.svg;
        } else if (test === targetCSS) {
            rule.exclude = CKEditorRegex.css;
        }
    });
});

mix.webpackConfig({
    plugins: [
        new CKEditorWebpackPlugin({
            language: 'en',
            addMainLanguageTranslationsToAllAssets: true
        }),
    ],
    module: {
        rules: [
            {
                test: CKEditorRegex.svg,
                use: ['raw-loader']
            },
            {
                test: CKEditorRegex.css,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: CKEditorStyles.getPostCssConfig({
                                themeImporter: {
                                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                                },
                                minify: true
                            })
                        }
                    }
                ]
            }
        ]
    }
});

Specs:

• node v.16.11.1
• npm v.8.0.0
• Laravel v.8.77.1

package.json

"laravel-mix": "6.0.40",
"postcss-loader": "^6.2.1",
"raw-loader": "^4.0.1",
"sass": "^1.49.4",
"sass-loader": "^12.4.0",
"style-loader": "^2.0.0"