Runtime Error: this._editorJS.destroy is not a function

Environment

• @editorjs/editorjs version: 2.23.2
• react-editor-js version: 2.0.6

Describe

I currently using next.js version 12.1.4. And the error occurs after the ClientEditorCore instance initial success as you can see below:

Also, there are two editors components mount on the page:

Editor.tsx file:

import React, { useEffect, useRef, useState } from "react";
import { EditorBlockPropsType } from "./index.type";
import { createReactEditorJS } from "react-editor-js";
import { ClientEditorCore } from "@react-editor-js/client/dist/client/src/client-editor-core";

const ReactEditorJS = createReactEditorJS();
const REACT_EDITOR_HOLDER_ID = "ssrHolder";

const EditorBlock = ({ content }: EditorBlockPropsType) => {
  let editorInstance;
  const [tools, setTools] = useState<any>();
  const initialValue = content || {
    time: 1635603431943,
    blocks: [
      {
        id: "sheNwCUP5A",
        type: "header",
        data: {
          text: "Editor.js",
          level: 2,
        },
      },
    ],
  };

  useEffect(() => {
    (async () => {
      const importedTools = await import("./editorTools");
      setTools(importedTools.EDITOR_JS_TOOLS);
    })();
    // console.log(EditorJS);
  }, []);

  if (!tools) {
    return <>Loading....</>;
  }

  return (
    <ReactEditorJS
      holder={REACT_EDITOR_HOLDER_ID}
      instanceRef={(instance: any) => (editorInstance = instance)}
      tools={tools}
      defaultValue={initialValue}
      placeholder="write something here..."
      onInitialize={(currentEditor: ClientEditorCore) =>
        console.log(currentEditor)
      }
    />
  );
};

export default EditorBlock;

editorTools.ts file:

import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import Marker from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";

export const EDITOR_JS_TOOLS = {
  embed: Embed,
  table: Table,
  marker: Marker,
  list: List,
  warning: Warning,
  code: Code,
  linkTool: LinkTool,
  image: Image,
  raw: Raw,
  header: Header,
  quote: Quote,
  checklist: CheckList,
  delimiter: Delimiter,
  inlineCode: InlineCode,
  simpleImage: SimpleImage,
};

My github repo Thank for support me,

[lifedup]

I’m using React 18 and Next 12, and this plugin was duplicating the editor, and throwing destroy is not a function error.

I fixed it by removing this plugin and using the default editorjs.

import EditorJS from "@editorjs/editorjs";
import { useEffect, useId, useRef } from "react";

const Editor = () => {
  const holder = useId();
  const editor = useRef<EditorJS | null>(null);

  useEffect(() => {
    if (!editor.current) {
      editor.current = new EditorJS({
        data: { blocks: [] },
        holder,
        tools: {},
      });
    }
    return () => {
      if (editor.current && editor.current.destroy) {
        editor.current.destroy();
      }
    };
  }, []);

  return <div id={holder} ref={editor}></div>;
};
export default Editor;

If you use Next.js, you can import the component to work with SSR.

const Editor = dynamic(() => import("path/to/editor"), { ssr: false });

[proteye]

I have the same error. Please fix it.