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

minhhieu1612 · 2022-04-07T09:37:03Z

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,

The text was updated successfully, but these errors were encountered:

proteye · 2022-04-07T18:41:34Z

I have the same error. Please fix it.

stale · 2022-04-16T14:22:32Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Jungwoo-An · 2022-04-16T17:39:43Z

I'm sorry for the late response. I'll fix it.

If you want to contribute this repo, feel free to create pull request.

mrspence · 2022-04-20T13:43:44Z

Suspect this is caused when the react component is created and destroyed before Editor JS is fully loaded (Editor JS has a pending promise on editorJS.isReady that resolves once fully loaded).

This means if you call _editorJS.destroy() before the underlying Editor JS is fully loaded, an error is thrown... codex-team/editor.js#919 (comment)

Temporary fix is don't create / destroy your react editor js component within ~3 seconds, suspect actual fix for react-editor-js is await _editorJS.isReady and then _editorJS.destroy()

AlbinoGeek · 2022-04-21T14:55:57Z

Yeah... this results in the package failing in NextJS.

Specifically, even with SSR disabled, two EditorJS components render, and this error is thrown.

AdrianSchneider · 2022-04-21T16:23:13Z

We just went through this as well: two components and a destroy error.

In our case, it was only broken in React 18. Downgrading to 17 fixed it for us.

AlbinoGeek · 2022-04-21T16:46:10Z

We just went through this as well: two components and a destroy error.

In our case, it was only broken in React 18. Downgrading to 17 fixed it for us.

Incredible! This at least lets me try and develop with this.

Temporary Workaround

# Downgrade to React 17 (and matching react-* packages)
# works for NextJS as well;
npx yarn add react@^17 react-dom@^17
# or
yarn add react@^17 react-dom@^17
# or
npm install react@^17 react-dom@^17

Result in package.json

{
  "dependencies": {
    "react": "^17",
    "react-dom": "^17",
  }
}

StitiFatah · 2022-05-14T10:01:42Z

Are you guys sure it's a react version problem ? Just got this error with .focus after updating react-editor-js to 2.0.6 and downgrading to [email protected] solved it

AlbinoGeek · 2022-05-14T12:24:54Z

To be fair, this is not the only extension that explodes when you give it react 18. One of the biggest changes, is the rendering mode. ReactDOM absolutely floods the console telling you that render is deprecated, this breaks a lot of extensions. Pinning react and reactDOM 17 has worked great for me in the one application I use this extension.

…

On Sat., May 14, 2022, 3:01 a.m. StitiFatah, ***@***.***> wrote: Are you guys sure it's a react version problem ? Just got this error with .focus after updating react-editor-js to 2.0.6 and downgrading to ***@***.*** solved it — Reply to this email directly, view it on GitHub <#190 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOSNPJ65YQR5AUPUOLE5GLVJ52ZHANCNFSM5SYYDRVA> . You are receiving this because you commented.Message ID: ***@***.***>

skworden · 2022-05-25T04:14:08Z

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 });

bekogeko · 2022-06-10T19:30:43Z

in next.js its giving an error about usage of useRef

second error is same

bekogeko · 2022-06-12T23:11:00Z

i realised its about strict mode and double invoking when its double invoked (its also means enviroment is in strict mode) its creates double instance and because of that one of them creates this error. Becase one of them is still null !!!

tinwritescode · 2022-10-05T12:59:11Z

Work for me:

const [tools, setTools] = useState<any>()

useEffect(() => {
  ;(async () => {
    const importedTools = await import('../components/editor-config')
    setTools(importedTools.EDITOR_JS_TOOLS)
  })()
}, [])

<EditorJs
  onInitialize={(editor: any) => {
    editorRef.current = editor
  }}
  placeholder="Notes"
  minHeight={100}
  onChange={(value: any) => {
    setFieldValue('note', value)
  }}
  tools={tools}
/>

Avinash1721 · 2022-10-08T16:49:46Z

This issue is coming because with react 18 page is rendered twice. To avoid this, turn off the strict mode in next.config.js

https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

berkaygurbuz · 2022-11-12T20:55:22Z

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 });

When I use your workaround, I couldn't write anything in input

AlbinoGeek · 2022-11-13T00:04:09Z

Not supporting react 18 will become less and less of an option as time goes on. I understand that they are deprecating the virtual dom, frankly, good riddance. You can also force a react 18 app to work with react 17, but when react 19 comes around, that all goes out the window. What doesn't make a whole lot of sense to me is that it's created twice and react 18, that is the inverse of what I would expect the deprecation of virtual dom to result in

…

On Sat., Nov. 12, 2022, 12:55 p.m. Berkay Gürbüz, ***@***.***> wrote: 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"; 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 }); When I use your workaround, I couldn't write anything in input — Reply to this email directly, view it on GitHub <#190 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOSNPOYAJN4FY65MGVI6G3WH774JANCNFSM5SYYDRVA> . You are receiving this because you commented.Message ID: ***@***.***>

minhhieu1612 added the bug Something isn't working label Apr 7, 2022

stale bot added the inactive label Apr 16, 2022

Jungwoo-An removed the inactive label Apr 16, 2022

This was referenced Apr 30, 2022

Mention this requires React<=17 in README #194

Open

instanceRef.current is undefined #191

Closed

sonji406 mentioned this issue Aug 21, 2023

Bugfix 포스트수정 오류 수정 Last-Survivors-3-8/VanilLog#19

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

minhhieu1612 commented Apr 7, 2022 •

edited

Loading

proteye commented Apr 7, 2022

stale bot commented Apr 16, 2022

Jungwoo-An commented Apr 16, 2022

mrspence commented Apr 20, 2022 •

edited

Loading

AlbinoGeek commented Apr 21, 2022 •

edited

Loading

AdrianSchneider commented Apr 21, 2022

AlbinoGeek commented Apr 21, 2022 •

edited

Loading

StitiFatah commented May 14, 2022 •

edited

Loading

AlbinoGeek commented May 14, 2022 via email

skworden commented May 25, 2022 •

edited

Loading

bekogeko commented Jun 10, 2022

bekogeko commented Jun 12, 2022

tinwritescode commented Oct 5, 2022 •

edited

Loading

Avinash1721 commented Oct 8, 2022

berkaygurbuz commented Nov 12, 2022

AlbinoGeek commented Nov 13, 2022 via email

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

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

Comments

minhhieu1612 commented Apr 7, 2022 • edited Loading

Environment

Describe

proteye commented Apr 7, 2022

stale bot commented Apr 16, 2022

Jungwoo-An commented Apr 16, 2022

mrspence commented Apr 20, 2022 • edited Loading

AlbinoGeek commented Apr 21, 2022 • edited Loading

AdrianSchneider commented Apr 21, 2022

AlbinoGeek commented Apr 21, 2022 • edited Loading

Temporary Workaround

StitiFatah commented May 14, 2022 • edited Loading

AlbinoGeek commented May 14, 2022 via email

skworden commented May 25, 2022 • edited Loading

bekogeko commented Jun 10, 2022

bekogeko commented Jun 12, 2022

tinwritescode commented Oct 5, 2022 • edited Loading

Avinash1721 commented Oct 8, 2022

berkaygurbuz commented Nov 12, 2022

AlbinoGeek commented Nov 13, 2022 via email

minhhieu1612 commented Apr 7, 2022 •

edited

Loading

mrspence commented Apr 20, 2022 •

edited

Loading

AlbinoGeek commented Apr 21, 2022 •

edited

Loading

AlbinoGeek commented Apr 21, 2022 •

edited

Loading

StitiFatah commented May 14, 2022 •

edited

Loading

skworden commented May 25, 2022 •

edited

Loading

tinwritescode commented Oct 5, 2022 •

edited

Loading