Custom Installation setup via Online builder integrations with next-js does not work types in relation to 'create' property missing in '{ Editor: typeof Editor; EditorWatchdog: typeof EditorWatchdog; }', assistance needed!

[jasmeet2021]

Errors:

editor={Editor}

Property 'create' is missing in type '{ Editor: typeof Editor; EditorWatchdog: typeof EditorWatchdog; }' but required in type '{ create(...args: any): Promise; }'

const data = editor.getData();

Property 'getData' does not exist on type 'Editor'.

Code:

'use client';

import React from 'react';
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build";

const editorConfiguration = {
    toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'outdent',
        'indent',
        '|',
        'imageUpload',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo'
    ]
};

function CustomEditor( props: any ) {
        return (
            <CKEditor
                editor={ Editor }
                config={ editorConfiguration }
                data={ props.initialData }
                onChange={ (event, editor ) => {
                    const data = editor.getData();
                    console.log( { event, editor, data } );
                } }
            />
        )
}

export default CustomEditor;

dependencies:

"@ckeditor/ckeditor5-react": "^6.2.0",
"ckeditor5-custom-build": "file:ckeditor5-40.1.0-6j2qd56wfdru",

[Witoso]

This means that you have Watchdog plugin enabled, and the named export is used. If you check, the export of the ckeditor.ts file, you will likely see:

export default { Editor, EditorWatchdog };

This means you need to use import:

import { Editor } from "ckeditor5-custom-build";

[jasmeet2021]

@Witoso

I see, though for me the above did not made any difference instead what I did was create the build via online builder 2-3 times and eventually installing and reinstalling the build made it work somehow and their are no overall build or typing conflicts issue now.

Though thanks for the information & your reply!

reff: my custom editor.tsx

'use client';

import React from 'react';
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build";

const editorConfiguration = {
    toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'outdent',
        'indent',
        '|',
        'imageUpload',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo'
    ]
};

export function CustomEditor( props: any ) {
        return (
            <CKEditor
                editor={ Editor }
                config={ editorConfiguration }
                data={ props.initialData }
                onChange={ (event, editor ) => {
                    const data = editor.getData();
                    console.log( { event, editor, data } );
                } }
            />
        )
}

export default CustomEditor;

This means that you have Watchdog plugin enabled, and the named export is used. If you check, the export of the ckeditor.ts file, you will likely see:

export default { Editor, EditorWatchdog };

This means you need to use import:

import { Editor } from "ckeditor5-custom-build";

[Witoso]

Sorry, I meant looking into the file in the folder from online builder ckeditor5-*/src/ckeditor.ts, to check what's the export.