ReferenceError: Element is not defined | Remix js about editor.js

[gohabereg]

Hi,
According to the log, the code is running in the NodeJS environment where Element is not defined as well as other browser APIs.
EditorJS is a client library, so you need to set up your project to not run EditorJS code on the server.

Closing the issue as it is not an EditorJS bug

[fzsf163]

@fzsf163 Could you share your solution?

yes sure.
the components that require to be rendered on client must be inside <ClientOnly/>, And if you have say a file named Component.tsx that has imports (like say editor js) that needs to be rendered on client, you simply name it Component.client.tsx, this *.client.tsx forces remix to render that components entirely on client side. To make it render only server side just change the *.client.tsx to *.server.tsx. Then when you call that component on any file and put that inside <ClientOnly>{ ()=> (<Component/>) }<ClientOnly/>. Install remix-utls to get client-only component.

Example :

Editor.client.tsx

import EditorJS from "@editorjs/editorjs";

export default function Editor() {
  const editor = new EditorJS({
    /**
     * Id of Element that should contain the Editor
     */
    holder: "editorjs",

    /**
     * Available Tools list.
     * Pass Tool's class or Settings object for each Tool you want to use
     */
  });
  return <div id="editorjs"></div>;
}

then I <Editor/> inside Blog-Page.tsx route

import { ClientOnly } from "remix-utils/client-only";
import Editor from "~/components/EditorJS.client"

  <ClientOnly fallback={<p>Loading Editor Please Wait...</p>}>
          {() => (
              <Editor></Editor> 
          )}
   </ClientOnly>

[fzsf163]

Hi, According to the log, the code is running in the NodeJS environment where Element is not defined as well as other browser APIs. EditorJS is a client library, so you need to set up your project to not run EditorJS code on the server.

Closing the issue as it is not an EditorJS bug

thank you sir, I will look into it.

[fzsf163]

I fixed it. Now it renders.

[jsgv]

@fzsf163 Could you share your solution?