Unable to use 'Simple upload adapter' of CKeditor5 | encountering error - CKEditorError: ckeditor-duplicated-modules

Question

I am using reactjs and ckeditor5-react. I am going through the standard documents to use Simple upload adapter https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

But it is failing with 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
▶ 2 stack frames were collapsed.
__webpack_require__
D:/Projects/nodejs/node-react-firebase-flashcards/firecards/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

package.json - relevant portion:

  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^12.0.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@ckeditor/ckeditor5-upload": "^12.0.0",

My imports

import React, { Component } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter"; ```


Within render:

<CKEditor
            editor={ClassicEditor}
              plugins={SimpleUploadAdapter}
            data="<p>Hello from CKEditor 5!</p>"
            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();
              this.setState({ cardEditor: data });
              console.log({ event, editor, data });
            }}
            onBlur={(event, editor) => {
              console.log("Blur.", editor);
            }}
            onFocus={(event, editor) => {
              console.log("Focus.", editor);
            }}
          />

I was planning to use this to upload files and images. What could be the reason for this?

Answer 1

Reading the documentation it seems like you have to compile in plugins, instead of just importing them through webpack:

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules