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

The question.

# I am facing an error like on terminal.

```sh
- 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:

```tsx
"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>;
}

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

;
};

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.