Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[bipindubey-technoark]

i am getting following issue while implementing @ckeditor/ckeditor5-react.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of CustomCKEditor.

my code ....

import React, { useState, useEffect, useRef } from 'react';

function CustomCKEditor(props) {
    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);
    }, []);

    return editorLoaded ? (
        <CKEditor
            editor={ClassicEditor}
            data="<p>Hello from CKEditor 5!</p>"
             onInit={(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();
                 console.log({ event, editor, data });
             }}
        />
    ) : (
        <div>Editor loading</div>
    );
}
export default CustomCKEditor;

[bipindubey-technoark]

[nchristopherteague]

I have the same issue after upgrading to the latest version.

[pomek]

As mentioned in the changelog, we changed a default object that is exported by the package.

Use the following syntax in your application:

import { CKEditor } from '@ckeditor/ckeditor5-react';
// or
const { CKEditor } = require( '@ckeditor/ckeditor5-react' );
// or 
require( '@ckeditor/ckeditor5-react' ).CKEditor

[ma2ciek]

It's a rule to check the release information (like https://github.com/ckeditor/ckeditor5-react/releases/tag/v3.0.0 in this case) to check what kind of a breaking change was between two major versions before doing an update.

TLDR; The onInit was renamed to onReady with a little bit changed semantic.

[regischen]

As mentioned in the changelog, we changed a default object that is exported by the package.

Use the following syntax in your application:

import { CKEditor } from '@ckeditor/ckeditor5-react';
// or
const { CKEditor } = require( '@ckeditor/ckeditor5-react' );
// or 
require( '@ckeditor/ckeditor5-react' ).CKEditor

This helps me, but the website didn't up-to-date, it takes a lot of time for me to fix this problem

[ma2ciek]

Hi @regischen,

Did you mean https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html? It's up to date, this section has been updated just after the release.

[Mangor1no]

As mentioned in the changelog, we changed a default object that is exported by the package.

Use the following syntax in your application:

import { CKEditor } from '@ckeditor/ckeditor5-react';
// or
const { CKEditor } = require( '@ckeditor/ckeditor5-react' );
// or 
require( '@ckeditor/ckeditor5-react' ).CKEditor

This solution should be included into the document. As you can see, the old document has not mentioned anything about this yet. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#integrating-ckeditor-5-built-from-source