SSR support

[EchinopsisM]

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.

[findelallc]

@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 #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:

editor.js/src/components/utils.ts

Lines 166 to 174 in 33be205

	/**
	* _log method proxy without Editor.js label
	*/
	export const log = _log.bind(window, false);
	/**
	* _log method proxy with Editor.js label
	*/
	export const logLabeled = _log.bind(window, true);

[b2m9]

Ran into this problem when building a statically rendered SvelteKit app. The build process fails because the package is trying to load window as soon as it is loaded.