CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

Question

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

Getting ckeditor 5 duplicate modules error. Anyone can help me. Thanks in Advance.

Answer 1

It's because you are importing the plugin with the build! In order to add plugins, you have to make a personnal build. Please read this page to know more about it: ckeditor offical documentation. They even have an official online builder that does all the work for you: ckeditor online builder. Once you created it, you have to import the editor just as you have done before on line 2, but instead of writing from "@ckeditor/ckeditor5-build-classic" you have to write from "adress of the build folder of your personnal build".

I hope it helped you.

Answer 2

I had this problem when I tried to add CKEditor and a plugin separately. the easiest way is go to CKEditor Online Builder and choose what plugins and toolbar items you need then after five steps the code that you need to work with is generated.

Then you can use the file named ckeditor.js in build folder and this is almost all that you need.

1- Add CKEditorModule

@NgModule({
  imports: [CKEditorModule],
...
}

2- Add the CKEditor tag to your template

<ckeditor
   [editor]="Editor"
   [(ngModel)]="notification.body"
   (ready)="onReady($event)"
   [config]="config"
></ckeditor>

3- import the customized CKEditor js file(that you should copy from build folder in downloaded customized CKEditor)in your component

import * as customEditor from './ckeditor';

4- Create a property in your component

 public Editor = customEditor;

5- Add your configs

 ngOnInit() {
   
    this.config = {
      toolbar: {
        items: [
          'heading',
          '|',
          'fontSize',
          'fontFamily',
          '|',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'highlight',
          '|',
          'alignment',
          '|',
          'numberedList',
          'bulletedList',
          '|',
          'indent',
          'outdent',
          '|',
          'todoList',
          'link',
          'blockQuote',
          'imageUpload',
          'insertTable',
          '|',
          'undo',
          'redo'
        ]
      },
      language: 'en',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells'
        ]
      },
      licenseKey: '',
      wordCount: {
        onUpdate: stats => {
          this.charactersLength = stats.characters
        }
      }
    }
  }

That's it :)

Answer 3

I had a similar problem. I solved it when I installed all modules of one version

Answer 4

NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!

Wrong: import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Correct: import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

Answer 5

I've face this issue when tried to use an editor on different pages few times. Tried everything what is written above, nothing helped. To solve the issue I used a React lazy loading for importing an editor.

Answer 6

For vue2: Use the code below from online builder and it works fine after this isse. Hope this helps someone. 

<ckeditor :editor="editor" v-model="editorForm.editor_content" :config="editorConfig"
    :height="120" :rows="6" @input="onEditorInput" @ready="onReady">
    <p>The initial editor data.</p>
</ckeditor>    

Import custom build file ckeditor.js from node_modules: 
        import CkEditorBuild from 'ckeditor5-custom-build/build/ckeditor';

Import ckeditor: 
        import CKEditor from '@ckeditor/ckeditor5-vue2';

variable: 
           

 editorForm: {
                editor_content: "",
            },
            editor: CkEditorBuild,
            editorConfig: {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'htmlEmbed',
                        // 'pageBreak',
                        'fontSize',
                        'fontFamily',
                        'fontColor',
                        'fontBackgroundColor',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        '|',
                        'alignment',
                        '|',
                        'numberedList',
                        'bulletedList',
                        '|',
                        'indent',
                        'outdent',
                        '|',
                        'link',
                        'blockQuote',
                        'imageUpload',
                        'insertTable',
                        'mediaEmbed',
                        '|',
                        'undo',
                        'redo',
                    ]
                }, language: 'cs',
                image: {
                    toolbar: [
                        'imageTextAlternative',

                        'imageStyle:center',
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                },
            },