ckeditor-duplicated-modules error

[alokjain-lucky]

"dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^36.0.1",
        "@ckeditor/ckeditor5-react": "^5.0.2",
}

React Component for Editor

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

import ResizableHeight from "@pikulinpw/ckeditor5-resizableheight";

// override the default styles
import "./custom.css";

const Editor = ({ data, setData, config = {}, height = "200px" }) => {
    return (
        <CKEditor
            editor={ClassicEditor}
            config={{
                toolbar: {
                    shouldNotGroupWhenFull: true,
                },
                plugins: [ResizableHeight],
                ...config,
            }}
            data={data}
            onChange={(event, editor) => {
                const data = editor.getData();
                setData(data);
            }}
            onReady={(editor) => {
                editor.editing.view.change((writer) => {
                    writer.setStyle(
                        "height",
                        height,
                        editor.editing.view.document.getRoot(),
                    );
                });
            }}
        />
    );
};

export default Editor;

It says: ckeditor-duplicated-modules Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules

Please suggest how do I fix this error?

[abejordan]

The issue seems to be because of the imported 'Plugin' class in the ResizableHeight.js file It is currently this: import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; It should be this: import { Plugin } from 'ckeditor5';

Reference here: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html#creating-a-plugin