CKEditorError: ckeditor-duplicated-modules in next js

Question

so my code is:

import { useEffect, useState, useRef } from "react";

function TextEditor({ token }) {
  const editorRef = useRef();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};
  const [data, setData] = useState("");

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
      Paragraph: require("@ckeditor/ckeditor5-paragraph/src/paragraph"),
    };
    setEditorLoaded(true);
  }, []);

  return (
    <div className="bg-[#F8F9FA] h-5/7 overflow-y-scroll max-w-6xl mx-auto">
      {editorLoaded ? (
        <CKEditor
          editor={ClassicEditor}
          data=""
          config={{
            plugins: [Paragraph],
            toolbar: ["bold", "italic"],
          }}
          onReady={(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();
            setData(data);
          }}
        />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default TextEditor;

so the problem is I only want the Paraghraph in my editor but when I run this code it returns CKEditorError: ckEditor-duplicated-modules I have also tried to add .Paragraph in front of the import for the paragraph is there something wrong with the code

Note next js 12

Answer 1

best tip is use next/script I guess.

import Script from "next/script";
...
<Script ... />

Because you will import CKEditor in a different way "outside" NextJs libs.

OR try this way :

    const Resumos = () => {
        const editorRef = useRef()
        const [ editorLoaded, setEditorLoaded ] = useState( false )
        const { CKEditor, ClassicEditor} = editorRef.current || {}

        useEffect( () => {
            editorRef.current = {
              CKEditor: require( '@ckeditor/ckeditor5-react' ).CKEditor, //Added .CKEditor
              ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' ),
            }
            setEditorLoaded( true )
        }, [] );
        
      const [data, setData] = useState('');

        return( 
          <>
            {editorLoaded ? <CKEditor
                editor={ ClassicEditor }
                data={data}
                onReady={ 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()
                  setData(data);
                } }
            /> : <p>Carregando...</p>}
        </>
        )
    }

Editing configs ( removing editor options, etc )

    <CKEditor
      ...
      config={{
        removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
      }}
        ...
    >
    </CKEditor>

Editing toolbars

    <CKEditor
      ...
      toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        ...
    >
    </CKEditor>

React ckEditor integration reference: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

Config reference : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html

Try this and keep me in touch. Hope this tip solves the problem!