Making Editor.js works in Remix

Question

I'm trying to integrate Editor.js into a Remix app.

I have tried different options (with ou without react-editor-js) but I always end up with compile errors:

ReferenceError: window is not defined
    at /home/.../project/node_modules/@editorjs/link/dist/link.umd.js:2:6471

or

ReferenceError: Element is not defined
    at /home/.../project/node_modules/@editorjs/checklist/dist/checklist.umd.js:2:1525

I have also tried to setup the editor with no plugin at least to have a working base, but i'm also ending with a console error in the browser:

Warning: Prop `id` did not match. Server: "react-editor-js-18c6d074c06" Client: "react-editor-js-18c6d074d5a"

Editor.js is not ready because of Error: element with ID «react-editor-js-18c6d074d5a» is missing. Pass correct holder's ID.

Uncaught (in promise) Error: element with ID «react-editor-js-18c6d074d5a» is missing. Pass correct holder's ID.

By using the following component:

import { createReactEditorJS } from "react-editor-js"

const ReactEditorJS = createReactEditorJS()

export default function EditorInput() {
    return (
        <ReactEditorJS
            defaultValue={{
                time: 1635603431943,
                blocks: [
                    {
                        id: "sheNwCUP5A",
                        type: "header",
                        data: {
                            text: "Editor.js",
                            level: 2,
                        },
                    },
                    {
                        id: "12iM3lqzcm",
                        type: "paragraph",
                        data: {
                            text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.",
                        },
                    },
                ],
            }}
            tools={{}}
        />
    )
}

If anyone as a working example, it would be great. Thanks in advance.

Answer 1

I recommend wrapping the Editor inside ClientOnly (from remix-utils).