How CKEditor 5 works at Next.JS?

user_12412876 0
Viewed 3567

I have the following issue:

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Resumos.

These different solutions didn't work:

Solution 1:


import dynamic from "next/dynamic";

const { CKEditor } = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-react');
  },
  { ssr: false }
);

const {ClassicEditor} = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-build-classic');
  },
  { ssr: false }
);

const Resumos = ({id}) => {
  <CKEditor 
       editor={ ClassicEditor }
       data={textoResumoAluno}
       onChange={handleChangeTextoResumoAluno}
  />
}

Solutioc 2:

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

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


{editorLoaded ? ( 
      <CKEditor
           editor={ ClassicEditor }
           data={textoResumoAluno}
           onInit={ editor => { /*You can store the "editor" and use when it is needed.
                 console.log('Editor is ready to use!', editor)*/
            }}
           onChange={handleChangeTextoResumoAluno}
       /> 
  ) : (
          <div>Editor loading</div>
  )}
}
next.js reactjs ckeditor javascript
1 Answers

Thanks @EstusFlask, it helped me find the solution!

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>}
     </>
     )
}
user_124128760
Related