Webpack-encore: CKEditor5 custom build problem

[wenmingtang]

I follow this example: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html

// webpack.config.js

const {styles} = require('@ckeditor/ckeditor5-dev-utils');
//...
.addLoader({
        test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
        loader: 'raw-loader'
})
.addLoader({
        test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
        use: [
            {
                loader: 'postcss-loader',
                options: styles.getPostCssConfig({
                    themeImporter: {
                        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                })
            },
        ]
    })

Then an error occurred. How can I solve it?

Thx.

[galvesband]

Hi. I've dealt with something similar but i'm a noob in the webpack and modern javascript world so take this with a grain of salt.

I've updated my symfony4 project to encore#master, by the way. I don't know if it is the same with the last stable version.

I think your problem is that the svg icons from ckeditor5 are not being handled correctly becouse rules fight each other for them. My solution disables encore default image loaders and set up new ones excluding ckeditor svg assets.

const {styles} = require('@ckeditor/ckeditor5-dev-utils');
// ...
Encore.
  // ...
  .addPlugin(new CKEditorWebpackPlugin({
    // .. CKEditor options like language and stuf...
  }))
  // Disable default image loaders from encore
  ..disableImagesLoader()
  // Use raw-loader for CKEditor icons only
  .addRule({
        test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
        use: [ {
            loader: 'raw-loader'
        } ]
    })
  // Next one is pretty much the default encore rule for handling images but excluding CKEditor
  .addRule({
        test: /\.(svg|png|jpg|jpeg|gif|ico)/,
        exclude: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
        use: [{
            loader: 'file-loader',
            options: {
                filename: 'images/[name].[hash:8].[ext]',
                publicPath: '/build/'
            }
        }]
    })
  .addRule({
        test: /\.css$/,
        use: [
            {
                loader: 'postcss-loader',
                options: styles.getPostCssConfig( {
                    themeImporter: {
                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                    },
                    minify: true
                } )
            },
        ]
    });

Hope it helps

[Lyrkan]

Hi,

The postcss-loader part can also probably be handled by Encore.enablePostCssLoader (I didn't test it though):

```js
Encore.enablePostCssLoader(options => {
Object.assign(options, styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true // Not sure that's needed, the css-loader already minifies CSS
}));
});

[galvesband]

@Lyrkan I've tested it and you are right, removing the post-css loader rule and using your snippet works well in my setup. minify is indeed not needed.

Thank you.

[Kocal]

Hi, today I had to build CKEditor5 from source in order to use the Underline plugin.

There is actually no documentation that shows how to do it (~I'm planning to open an issue/PR on CKEditor docs repo~ see https://github.com/ckeditor/ckeditor5/pull/1956), so I made a repo that describe how to: https://github.com/Kocal/webpack-encore-vue-ckeditor5

(The configureLoaderRule is really useful! :stuck_out_tongue_closed_eyes: :eyes: )

I think this issue can be closed.

EDIT: Instead of using enablePostCssLoader() and configure it, we can use the following code to add a new postcss-loader for CKEditor5 only, and prevent issues with other .css if you work on an application which build CKEditor5:

When using .enablePostCssLoader():

Use this instead:

  Encore.addLoader({
    test: /ckeditor5-[^/\\]+[/\\].+\.css$/,
    loader: 'postcss-loader',
    options: styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
      },
    }),
  })