Multiple CKEditor5 (of different build) in ReactJs - Ending in 'CKEditorError: ckeditor-duplicated-modules'

Question

I have created a main component and two sub-components to load two different builds of CKeditor5(classic and balloon); but it is giving below error:

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

First Component:

import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import BalloonEditor from "@ckeditor/ckeditor5-build-balloon";

..

return (
<CKEditor
  editor={BalloonEditor}
  //data="<p>Hello from CKEditor 5!</p>" //using placeholder instead
  config={editorConfiguration}
  onInit={editor => {
    // You can store the "editor" and use when it is needed.
    console.log("Editor is ready to use!", editor);
  }}
  onChange={(event, editor) => {
    const data = editor.getData();
    //console.log({ event, editor, data });
  }}
/>);

Second Component:

import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

 ..

return (
    <CKEditor
      editor={BalloonEditor}
      //data="<p>Hello from CKEditor 5!</p>" //using placeholder instead
      config={editorConfiguration}
      onInit={editor => {
        // You can store the "editor" and use when it is needed.
        console.log("Editor is ready to use!", editor);
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        //console.log({ event, editor, data });
      }}
    />);

Main Component:

return (
  <CardFront />
  <CardBack />
)

Any ideas on how to get over this? Or is this a limitation?

Answer 1

That could help:

Creating “super builds”

There is no limit for how many editor classes a single build can export. By default, the official builds export a single editor class only. However, they can easily import more.

You can start from forking (or copying) an existing build like in the “Creating custom builds” guide. Let’s say you forked and cloned the ckeditor5 repository and want to add InlineEditor to the classic build:

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-3-using-two-different-editors