CKEditor: [CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation

Question

I am updating the CKEditor packages in my Rails/React app from ~12 to the latest version 27. When running the app locally in my webpack-dev-server I see this error message below, and I'm not sure how to determine which option is best/correct?

[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should use one of the following options to specify the strategy:
 - use `addMainLanguageTranslationsToAllAssets` to add translations for the main language to all assets,
 - use `buildAllTranslationsToSeparateFiles` to add translation files via `<script>` tags in HTML file,
 - use `translationsOutputFile` to append translation to the existing file or create a new asset.For more details visit https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin.

---

The environment.js file currently looks like this:

const { environment } = require("@rails/webpacker")
const typescript = require("./loaders/typescript")
const GitRevisionPlugin = require("git-revision-webpack-plugin")

environment.loaders.append("typescript", typescript)

environment.plugins.prepend(
  "Define",
  new webpack.DefinePlugin({
    // On Heroku git is not available, but SOURCE_VERSION is provided
    GIT_VERSION: JSON.stringify(process.env.SOURCE_VERSION || new GitRevisionPlugin().commithash()),
    BUILD_TIME: JSON.stringify(new Date().toISOString()),
  })
)

environment.plugins.prepend(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery",
  })
)

environment.config.externals = ["cloudinary"]

// Add support for CKEditor 5.
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")

environment.plugins.prepend(
  "CKEditor",
  new CKEditorWebpackPlugin({
    language: "en",
  })
)

// Define custom loaders for CKEditor's SVG and CSS files.
environment.loaders.append("CKEditorSVGLoader", require("./loaders/ckeditor/svg"))
environment.loaders.append("CKEditorCSSLoader", require("./loaders/ckeditor/css"))

// Tell the standard CSS and file loaders to ignore CKEditor's CSS and SVG files. We have our own loaders for those.
environment.loaders.get("css").exclude = /(\.module\.[a-z]+$)|(ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css)/
environment.loaders.get("file").exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/

module.exports = environment

Project is running:

• ruby 2.6.6
• Rails 6.0.3.6
• webpack-dev-server": 3.11.2

Answer 1

I encountered this issue too while making a custom build in CKEditor. So i assume you followed these instructions ("Webpack Encore" section).

In this solution, i am using the webpack.config.js config file (PHP setup using Encore). The config file name may change from one language to another. If you are not using Encore (i recommand using it), the code may vary a bit, but the logic is the same.

1. If you don't need translations for your build:

Simply remove this part from webpack.config.js:

.addPlugin( new CKEditorWebpackPlugin( {
    language: 'pl'
} ) )

2. If your need translations:

Add the addMainLanguageTranslationsToAllAssets option and set it on true, like this:

.addPlugin( new CKEditorWebpackPlugin( {
    language: 'pl',
    addMainLanguageTranslationsToAllAssets: true
} ) )