error "node_modules/@editorjs/editorjs/dist/editorjs.umd.js (1:525) @ eval" and "ReferenceError: Element is not defined"

[hozaifa4you]

The question.

I am facing an error like on terminal.

- error node_modules/@editorjs/editorjs/dist/editorjs.umd.js (1:525) @ eval
- error ReferenceError: Element is not defined
    at __webpack_require__ (/home/yousuf4you/Desktop/devto-clone/.next/server/webpack-runtime.js:33:43)
    at eval (./components/ContentEditor.tsx:9:76)
    at (ssr)/./components/ContentEditor.tsx (/home/yousuf4you/Desktop/devto-clone/.next/server/app/posts/new/page.js:10975:1)
    at __webpack_require__ (/home/yousuf4you/Desktop/devto-clone/.next/server/webpack-runtime.js:33:43)
    at eval (./app/posts/new/page.tsx:18:83)
    at (ssr)/./app/posts/new/page.tsx (/home/yousuf4you/Desktop/devto-clone/.next/server/app/posts/new/page.js:10964:1)
    at __webpack_require__ (/home/yousuf4you/Desktop/devto-clone/.next/server/webpack-runtime.js:33:43)

and my code is:

"use client";
import React, { Dispatch, SetStateAction, useEffect } from "react";
import EditorJS, { OutputData } from "@editorjs/editorjs";
import Header from "@editorjs/header";
import LinkTool from "@editorjs/link";
import RawHTML from "@editorjs/raw";
import CheckList from "@editorjs/checklist";
import SimpleImage from "@editorjs/simple-image";
import Embed from "@editorjs/embed";
import Quote from "@editorjs/quote";
import Paragraph from "@editorjs/paragraph";
import Table from "@editorjs/table";
import NestedList from "@editorjs/nested-list";
import TextVariantTune from "@editorjs/text-variant-tune";
import Underline from "@editorjs/underline";
import InlineCode from "@editorjs/inline-code";
import CodeTool from "@editorjs/code";
import Warning from "@editorjs/warning";
import Marker from "@editorjs/marker";
import AttachesTool from "@editorjs/attaches";
import Delimiter from "@editorjs/delimiter";

interface PropTypes {
  setOutputData: Dispatch<SetStateAction<OutputData | null>>;
}

const ContentEditor = ({ setOutputData }: PropTypes) => {
  useEffect(() => {
    const editor = new EditorJS({
      holder: "editorjs",
      placeholder: "Write your post content here...",
      // onReady: () => {
      //   editorRef.current = editor;
      // },
      onChange: async () => {
        const content = await editor.saver.save();
        setOutputData(content);
      },

      tools: {
        header: { class: Header, inlineToolbar: true },
        list: { class: NestedList, inlineToolbar: true },
        checklist: {
          class: CheckList,
          inlineToolbar: true,
        },
        // FIXME: some fix need
        linkTool: {
          class: LinkTool,
        },
        rawHtml: RawHTML,
        image: {
          class: SimpleImage,
          inlineToolbar: true,
          config: {
            placeholder: "Paste image URL",
          },
        },
        embed: {
          class: Embed,
          config: {
            service: {
              youtube: true,
              facebook: true,
              instagram: true,
              twitter: true,
              codepen: true,
              pinterest: true,
            },
          },
        },
        quote: {
          class: Quote,
          inlineToolbar: true,
          shortcut: "CMD+SHIFT+O",
          config: {
            quotePlaceholder: "Enter a quote",
            captionPlaceholder: "Quote's author",
          },
        },
        paragraph: {
          class: Paragraph,
          inlineToolbar: true,
        },
        table: {
          class: Table,
          inlineToolbar: true,
          config: {
            rows: 2,
            cols: 3,
          },
        },
        textVariant: TextVariantTune,
        underline: Underline,
        inlineCode: {
          class: InlineCode,
          shortcut: "CMD+SHIFT+M",
        },
        code: CodeTool,
        warning: {
          class: Warning,
          inlineToolbar: true,
          shortcut: "CMD+SHIFT+W",
          config: {
            titlePlaceholder: "Title",
            messagePlaceholder: "Message",
          },
        },
        Marker: {
          class: Marker,
          shortcut: "CMD+SHIFT+M",
        },
        attaches: {
          class: AttachesTool,
          config: {
            // FIXME: fix the path
            endpoint: "http://localhost:8008/uploadFile",
          },
        },
        delimiter: Delimiter,
      },
    });

    return () => {
      editor.destroy();
    };
  }, [setOutputData]);

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

export default ContentEditor;

I'm using

OS: Ubuntu@22.04.3 LTS
Runtime: Bun@1.0.1
NextJs: 13.4.19
Typescript: 5.2.2

Hope someone will solve the problem.

[TD-INFRANFC]

+1 same problem

[limichange]

You need to dynamically load the component and disable ssr.

import dynamic from 'next/dynamic'

export const EditorJS = dynamic(() => import('./EditorJSInner'), {
  ssr: false,
})