How to resolve TypeScript errors with custom build and React ?

[axelvaindal]

Hello 👋,

I've followed the official documentation regarding creating a custom build with the builder (which gave me a zip module to add to my project) and followed the Next.js example to the letter.

However, I'm encountering TypeScript issues which I've found similar to the one mentioned in an Angular issue, but I don't understand what's the correct way to solve those.

Here is the code we use:

"use client";

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import DecoupledEditor from "ckeditor5/build/ckeditor";

export default function EditorEmbed() {
  const Editor = DecoupledEditor;

  return (
    <div className="editor">
      <CKEditor
        config={{
          licenseKey:
            "some-key",
          language: "fr",
          toolbar: [
            "undo",
            "redo",
            "|",
            "fontsize",
            "fontfamily",
            "|",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "|",
            "numberedList",
            "bulletedList",
          ],
        }}
        editor={Editor}
        data="<p>Hello from CKEditor&nbsp;5!</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          const toolbar = document.getElementById("editorToolbar");
          if (toolbar) {
            toolbar.appendChild(editor.ui.view.toolbar.element!);
          }
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event) => {
          console.log(event);
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
}

When using any editor from the package, we get the two following errors:

Error related to the Editor class itself:

Type 'typeof Editor' is not assignable to type '{ create(...args: any): Promise<Editor>; }'.
  The types returned by 'create(...)' are incompatible between these types.
    Type 'Promise<DecoupledEditor>' is not assignable to type 'Promise<Editor>'.
      Type 'DecoupledEditor' is not assignable to type 'Editor'.
        Types of property 'commands' are incompatible.
          Type 'import("/Users/axelvaindal/Documents/edithetnous/edithetnous/node_modules/@ckeditor/ckeditor5-editor-decoupled/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default' is not assignable to type 'import("/Users/axelvaindal/Documents/edithetnous/edithetnous/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default'.
            Types have separate declarations of a private property '_commands'.

Error related to the EditorUIView class:

Property 'toolbar' does not exist on type 'EditorUIView'.

Code was tested prior to using custom build and works functionaly, but it seems the types are not aligned. Thanks for your help,

[axelvaindal]

Here is a screen from VSCode for better context:

[axelvaindal]

Somehow, reinstalling with npm install and downgrading / upgrading React package version fixed the error. 🤷‍♂️

[Witoso]

I'm glad you were able to resolve this! We will make sure to test new installation methods (ckeditor/ckeditor5#15502) against this as well.