0
I’m making the following mistake:
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
.
I tried two different ways I found to solve this, but none
Form 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}
/>
}
Form 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>
)}
}