`npm run development` fails after upgrading to Laravel Mix 6 with CKEditor 5 installed

Hey there,

I am upgrading a Laravel application that had Laravel Mix 5 running. Now I have upgraded Mix to version 6. When running npm run development I get the following errors (53):

ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[2]!./node_modules/style-loader/dist/cjs.js??ruleSet[1].rules[15].use[0]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[15].use[1]!./node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css)
Module build failed (from ./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) C:\[...]\node_modules\@ckeditor\ckeditor5-widget\theme\widgettypearound.css Unknown word

> 1 | import api from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    | ^
  2 |             import content from "!!../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[15].use[1]!./widgettypearound.css";
  3 |

The following versions of the loaders are installed:

css-loader@"^5.2.7" from @ckeditor/[email protected]
css-loader@"^5.2.6" from [email protected]

postcss-loader@"^6.2.0" from [email protected]
postcss-loader@"^4.3.0" from @ckeditor/[email protected]

style-loader@"^2.0.0" from @ckeditor/[email protected]
style-loader@"^2.0.0" from [email protected]

Does anyone have an idea what I can do to get this solved?

Appreciate any help!

Thanks, Bernhard

LaryAI

1 year ago

Level 58

The error you're encountering is related to how CSS is being processed by Laravel Mix 6, especially with the CKEditor 5 package. This issue often arises due to differences in how CSS and PostCSS are handled between different versions of Laravel Mix.

Here’s a step-by-step solution to resolve this issue:

Update Dependencies: Ensure that all your dependencies are up-to-date, especially css-loader, postcss-loader, and style-loader.
Install Required Packages: Make sure you have the necessary loaders installed. You can install them using npm or yarn:
```
npm install css-loader postcss-loader style-loader --save-dev
```
Update webpack.mix.js Configuration: Modify your webpack.mix.js to handle CSS files correctly. You might need to add specific rules for handling CKEditor’s CSS files.

Here’s an example of how you can configure your webpack.mix.js:

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

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer'),
                                ],
                            },
                        },
                    },
                ],
            },
        ],
    },
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

Check for CKEditor Specific Configuration: CKEditor 5 might require specific configurations. Ensure that you are importing CKEditor’s CSS correctly in your JavaScript files. For example:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/en';
import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';

ClassicEditor
    .create(document.querySelector('#editor'))
    .catch(error => {
        console.error(error);
    });

Run npm run development Again: After making these changes, try running npm run development again to see if the issue is resolved.

npm run development

By following these steps, you should be able to resolve the CSS processing issues with Laravel Mix 6 and CKEditor 5. If the problem persists, consider checking the CKEditor 5 documentation or the Laravel Mix GitHub issues page for more specific solutions related to your setup.

bernhardk

1 year ago

Level 2

Updating the webpack.mix.js config and running npm install css-loader, as suggested by @LaryAI, seems to have resolved the issue.

In addition, I have added the following code (found in another threat):

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

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

mix.webpackConfig({
   //... HERE GOES THE EXISTING CONFIG
})

mix.override(config => {
  const rules = config.module.rules
  const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/
  const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/
  const targetCSS = /\.css$/

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

Please or to participate in this conversation.