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

[meln1337]

Hi! I was trying to start my project with ckeditor, but I get an 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

My code:

import React, { useState } from 'react'
import { useHttp } from '../hooks/http.hook'
import {useMessage} from '../hooks/message.hook'
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

const CreatePost = () => {
    const {request} = useHttp()
    const [form, setForm] = useState({
        title: '',
        text: '',
        author: ''
    })

    const message = useMessage()

    const changeHandler = e => {
        setForm({...form, 
            [e.target.name]: e.target.value}
        )
    }

    const addPost = async () => {
        const data = await request('/api/posts', 'POST', {...form})
        message(data.message)
    }

    return (
        <div>
            <div className="row">
                <div className="input-field col s12">
                    <input 
                        id="title" 
                        type="text" 
                        className="validate"
                        name="title"
                        value={form.title}
                        onChange={changeHandler}
                        required
                    />
                    <label htmlFor="title">Title</label>
                </div>
            </div>
            <CKEditor
                editor={ ClassicEditor }
                data="<p>Hello from CKEditor 5!</p>"
                onChange={ ( event, editor ) => {
                    const text_editor = editor.getData();
                    setForm(
                        {...form, text: text_editor}
                    )
                } }
                plugins={[SimpleUploadAdapter]}
                simpleUpload={{
                    uploadUrl: 'ht' 
                }}
            />
            <div className="row">
                <div className="input-field col s12">
                    <input 
                        id="author" 
                        type="text" 
                        className="validate"
                        name="author"
                        value={form.author}
                        onChange={changeHandler}
                    />
                    <label htmlFor="author">Автор</label>
                </div>
            </div>
            <a className="waves-effect waves-light btn" onClick={addPost}>Створити пост</a>
        </div>
    )
}

export default CreatePost

I was trying to delete package-lock.json and rm -rf node_modules and npm i, but it doesn't help me. What should I do to fix the error?

[Mgsy]

Hi! Your issue occurs because you're adding a plugin directly to the build, which isn't allowed. If you'd like to use the SimpleUploadAdapter plugin, you should create a new build which will include that plugin, then import it to you React integration. Please, see our Installing plugins guide.

[kyle-ssg]

If that's the case, does this make the following from the docs incorrect?

I've got pretty much the same usecase where I want to add a single plugin to the classic editor

import Font from '@ckeditor/ckeditor5-font/src/font';
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Font, ... ],
        toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
    } )
    .then( ... )
    .catch( ... );

https://ckeditor.com/docs/ckeditor5/latest/features/font.html

[Mgsy]

Hi @kyle-ssg! The mentioned snippet is valid. Please, take a look at the guide I've mentioned above - it explains how to install plugins in CKEditor 5.

[Warxcell]

Same here:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Font from '@ckeditor/ckeditor5-font/src/font';
export default class ClassicEditor extends ClassicEditorBase {
}
ClassicEditor.builtinPlugins = [
    Font,
];
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'fontSize',
            'fontColor',
            'fontBackgroundColor',
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: {
        ui: 'en',
        content: 'en'
    }
};

results in: Uncaught CKEditorError: ckeditor-duplicated-modules

[alexander-schranz]

I'm running into the same error. For me it looks like ckeditor5 did define something as a dependency which should be a peer dependency. Else it can be in some directory structure be that npm itself does create 2 copies of the same ckeditor module. Peer dependencies where specially implemented in npm for this use case, libraries as react, mobx, .. which should only be exist once in a project are added as peerDependency to avoid this conflicts of multiple version in npm.

@Mgsy I really would recommend that the modules which can not exist multiple times are added as peer dependency, to the plugins and the other dependencies, else this error will happen also when not using a build version of ckeditor which is the case in our place.

[Mgsy]

To all struggling with the duplicated modules error - we've merged DLLs, the solution that allows a developer to add plugins along with the build, without any issues. It's ready to use, however, the guide is not published yet (but it's available on the latest master), because it needs some polishing.

[alexander-schranz]

@Mgsy thank you for the response. Do you recommend to use now the build version of the classic editor? We are currently building it like in the docs: https://github.com/sulu/sulu/blob/08e3c20938208fdcf76bd59ae4fce9615a2859bb/src/Sulu/Bundle/AdminBundle/Resources/js/containers/CKEditor5/CKEditor5.js#L158-L182 and edited our webpack build to add the lark theme and the other stuff: https://github.com/sulu/sulu/blob/08e3c20938208fdcf76bd59ae4fce9615a2859bb/webpack.config.js#L91.

As the one which installs the dependencies is not a direct parent (see package.json) npm will when they try to add a plugin this way errors with the ckeditor-duplicated-modules, because how npm installs the dependencies. I tried the latest 26 version there is the same error but did use the source version of the classic editor should I switch to the build version to avoid this?

[Warxcell]

I found my issue here. It was because of different versions of different plugins.
I was installed one of plugins long time ago, and when I added the new one it was newer version than others leading to error.

[Osmon11]

still having this issue and I don't know how to fix!!!

[Osmon11]

Oh I fixed it.
Just moved the build folder from the result of online builder.