Unhandled Rejection (Error): element with ID «editorjs» is missing. Pass correct holder's ID

Question

I am developing a react app which uses Editor.js as an editor and that page is working fine. But when ever i try to access other pages it gives Unhandled Rejection. This is confusing because i am importing editorjs packages only to the editor page, but it's asking for element with id "element-js".

This is editor connfig file.

const editor = new EditorJS({
holder: 'editorjs',
autofocus: true,
tools: {
  paragraph: {
    class: Paragraph,
    inlineToolbar: true,
    config: {
      placeholder: 'Write Here....'
    },
  },
  table: {
    class: Table,
    inlineToolbar: true,
    config: {
      rows: 2,
      cols: 3,
    },
  },
  header: {
    class: Header,
    /**
     * This property will override the common settings
     * That means that this tool will have only Marker and Link inline tools
     * If 'true', the common settings will be used.
     * If 'false' or omitted, the Inline Toolbar wont be shown
     */
    inlineToolbar: true,
    config: {
      placeholder: 'Header'
    },
    shortcut: 'CMD+SHIFT+H'
  },

  delimiter: Delimiter,
  warning: Warning,
  list: {
    class: List,
    inlineToolbar: [
      'link',
      'bold'
    ]
  },
  quote: Quote,
  checklist: {
   class: Checklist,
   inlineToolbar: true,
  },
  Marker: {
    class: Marker,
    shortcut: 'CMD+SHIFT+M',
  },
  embed: {
    class: Embed,
    inlineToolbar: false,
    config: {
     services: {
       youtube: true,
       coub: true
     },
    },
  },
  image: ImageTool,  
}

});

And how i am importing:

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Checklist from '@editorjs/checklist';
import Embed from '@editorjs/embed';
import Marker from '@editorjs/marker';
import Warning from '@editorjs/warning';
import Quote from '@editorjs/quote';
import Delimiter from '@editorjs/delimiter';
import ImageTool from '@editorjs/image';
import Table from "@editorjs/table";
import Paragraph from "@editorjs/paragraph";

I don't know what's the problem here. In my opinion these imports are importing globally to the whole app.

Answer 1

Now I have used React-editor-js and it's working fine.

https://www.npmjs.com/package/react-editor-js

Answer 2

I get this problem and solved, i put here for anybody come atfer. I using the NextJS 13.4 And React 18.

My Code:

    import EditorJS from '@editorjs/editorjs'
            
    const initEditor = () => {
            const editor = new EditorJS({
                /**
                 * Id of Element that should contain Editor instance
                 */
                holder: 'editorjs'
            });
    
        }
        useEffect(() => {
            initEditor()
        }, [])

return { <> <div id="editorjs" ></div> <> }

Answer 3

I know this is a bit late but some other people like me still arrive here with the same issue and some of us don't want to use an unofficial editor.js component.

So the issue is pretty simple, that error means that you must have an element with id editorjs in the DOM but since Im using Next.js I will explain how to use it step by step. (you won't need extra steps if you are only using React)

1. Create a component that looks like this: (You have to install plugins otherwise you will get some errors)

   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'
   
   import EditorJS from '@editorjs/editorjs'
   
   const EditorNoSSR = ({ type }) => {
   
    const 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,
    }
   
    const editor = new EditorJS({
        /** 
         * Id of Element that should contain the Editor 
         */
        holder: 'editorjs',
        tools: TOOLS,
    })
   
    return (<>
        <div>
            <div id="editorjs">
            </div>
        </div>
    </>);
    }
   

   export default EditorNoSSR;

That is a component that you will import using next/dynamic and it will work perfectly. And to share data from this component to another you can use react's context.

Now a page where you call the component will look like this:

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";

const EditorNoSSR = dynamic(() => import("../../../components/EditorNoSSR"), { ssr: false })

const EditorPage = () => {



    return (<>
        <EditorNoSSR />
    </>);
}

export default EditorPage;