Editor.js: SSR support

[noahniuwa]

Can't use by node.js import in Next.js

When I try to use by way of a Node.js import, I get an "ReferenceError: window is not defined" error in the browser and can't use it at all.

It works fine when I load it by CDN in the head.

[danilockthar]

Hello Noah. Could you connect editor js to nextjs ? Im trying the cdn as you said but im not able to make it work. If you can give a little insight, maybe at this time you already make it work on next.

[findela]

@noahniuwa you need to wrap the editor as a component as make it ssr false through dynamic import method provided by Next.js. I got the same problem before.

you may follow like this
const EditorWidget = dynamic(import ('../src/components/Utils/Editor'),{ssr:false});

Now in the editor you can start adding configs and tool options as per your requirements.
Thanks.

[Md-Abdul-Halim-Rafi]

There is a similar problem in importing in the GatsbyJs project. It works fine in localhost with normal importing. But, at gatsby build it occurs an ssr issue. I solved it for my gatsby js project like this:

import the EditorJs component by @loadable/component

import Loadable from "@loadable/component"
const EditorJs = Loadable(() => import("../../../../../editor/EditorJs"))

for more details, check gatsby js official documentation

[tkesgar]

I believe the problem is that the distributed editor.js package module (dist/editor.js) somehow tries to access window. This will cause issues with all SSRs (not only Next.js, but also Nuxt.js, Gatsby, etc.)

A simple fix is to import editor.js dynamically. Here is a simple wrapper we use for React:

import * as React from "react";
import { EditorConfig } from "@editorjs/editorjs";

interface EditorJsWrapperProps extends React.ComponentProps<"div"> {
  config?: EditorConfig;
}

export default function EditorJsWrapper({
  config = {},
  ...restProps
}: EditorJsWrapperProps): JSX.Element {
  const elmtRef = React.useRef<HTMLDivElement>();

  React.useEffect(() => {
    if (!elmtRef.current) {
      return;
    }

    let editorJs;

    (async () => {
      const { default: EditorJS } = await import("@editorjs/editorjs");

      editorJs = new EditorJS({
        ...config,
        holder: elmtRef.current,
      });
    })().catch((error): void => console.error(error));

    return (): void => {
      editorJs.destroy();
    };
  }, [config]);

  return (
    <div
      {...restProps}
      ref={(elmt): void => {
        elmtRef.current = elmt;
      }}
    />
  );
}

A proper fix would be to check if editor.js never access window on module level.

[Teebo]

@neSpecc, @tkesgar mentions that we need a check on Editor.js itself if window is defined, I was searching in the source of editor.js but was unsure where the window object is being used, can you please point me to that file(s).
Node does not give me the source map so I cannot point it out on the error log.

[Teebo]

@tkesgar I am using the Editor in Angular, I have the same issue when building for SSR.
I am just curious how does a dynamic import solves this issue.
If you do not mind, please check this issue https://github.com/codex-team/editor.js/issues/1254

Because it fails even when the window object is under the globals;
I am just trying to make sense of this issue.

[tkesgar]

I don't remember the exact part of code that causes the issue, but I looked for window on the source code and these lines seem suspicious:

https://github.com/codex-team/editor.js/blob/33be2052edc18bef7c320dca3646be9a2aa954af/src/components/utils.ts#L166-L174