SSR support #1036

NoahMaizels · 2020-02-13T13:49:41Z

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 · 2020-04-02T02:02:12Z

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 · 2020-04-28T14:06:51Z

@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 · 2020-05-12T06:45:01Z

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 · 2020-06-13T16:18:31Z

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 · 2020-07-29T14:35:33Z

@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 · 2020-07-29T14:37:22Z

@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 · 2020-07-29T14:54:20Z

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 · 2021-06-04T13:02:15Z

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.

jbarrantesr92 · 2021-08-07T16:17:39Z

I am using Angular 11, and I get the window error during ssr only when define const editor = new EditorJS (). If I put a comment block on this, then I don't get the window error even when the module is imported, and I can see my app in the server without the editor of course. I tried IsPlatformBrowser, but this does not work. I read about creating a shime module, but I'm not sure how to make it work for editorjs: https://medium.com/@caerus.karu/isplatformbrowser-is-not-your-friend-5ee52b06da89

sisindrymedagam · 2021-08-26T15:00:05Z

Hello,

I have integrated editor.js in my Angular SSR. when I was trying to load the editor route, the node server encountered an error saying self is not defined. Please help with it.

The complete log goes here...

ERROR Error: Uncaught (in promise): ReferenceError: self is not defined
ReferenceError: self is not defined
    at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
    at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
    at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
    at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
    at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
    at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
    at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
    at resolvePromise (C:\home\site\wwwroot\main.js:1:1990849)
    at resolvePromise (C:\home\site\wwwroot\main.js:1:1989864)
    at C:\home\site\wwwroot\main.js:1:1992718
    at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976992)
    at Object.onInvokeTask (C:\home\site\wwwroot\main.js:1:469995)
    at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976882)
    at Zone.runTask (C:\home\site\wwwroot\main.js:1:1970002)
    at drainMicroTaskQueue (C:\home\site\wwwroot\main.js:1:1980199) {
  rejection: ReferenceError: self is not defined
      at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
      at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
      at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
      at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
      at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
      at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
      at Zone.run (C:\home\site\wwwroot\main.js:1:1968989),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: ReferenceError: self is not defined
        at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
        at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
        at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
        at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
        at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
        at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
        at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: self is not defined
          at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
          at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
          at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
          at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
          at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
          at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
          at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

If there is a Solution, Please Suggest.

tkesgar · 2021-08-26T21:54:12Z

For those who still encounter this issue, the problem is that the package's code references browser-specific APIs when executed on server, which does not provide browser-specific APIs. This is an issue with most browser-intensive packages that interact and manipulate browser DOM, since adding a special check for SSR is just not worth it (leads to a lot of if-then-else and edge cases).

To work around the issue, you need to ensure that EditorJS code is not executed on SSR. You can refer to your framework documentation on how to achieve this:

Next.js: use next/dynamic
Gatsby: use @loadable/component

For example, here is how to import it in Next.js:

// ComponentThatUseEditorJS.jsx
import EditorJS from "@editorjs/editor"

export default function ComponentThatUseEditorJS() {
  return /* your code here */
}

// MyPage.jsx
import dynamic from "next/dynamic"

const ComponentThatUseEditorJs = dynamic(() => import("./ComponentThatUseEditorJs"))

export default function MyPage() {
  return (
    <div>
      <ComponentThatUseEditorJs />
    </div>
  )
}

If you use third-party EditorJS wrappers such as react-editor-js or vue-editor-js, the fix still applies: use your framework's tools to exclude it from SSR.

This technique also works with other non-SSR-compatible packages (not only EditorJS).

I propose to close this issue since the problem is not on EditorJS side and the workaround is platform-specific.

Chaitanya-yash · 2021-09-16T08:07:22Z

Hello,

I have integrated editor.js in my Angular SSR. when I was trying to load the editor route, the node server encountered an error saying self is not defined. Please help with it.

The complete log goes here...

ERROR Error: Uncaught (in promise): ReferenceError: self is not defined
ReferenceError: self is not defined
    at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
    at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
    at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
    at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
    at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
    at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
    at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
    at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
    at resolvePromise (C:\home\site\wwwroot\main.js:1:1990849)
    at resolvePromise (C:\home\site\wwwroot\main.js:1:1989864)
    at C:\home\site\wwwroot\main.js:1:1992718
    at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976992)
    at Object.onInvokeTask (C:\home\site\wwwroot\main.js:1:469995)
    at ZoneDelegate.invokeTask (C:\home\site\wwwroot\main.js:1:1976882)
    at Zone.runTask (C:\home\site\wwwroot\main.js:1:1970002)
    at drainMicroTaskQueue (C:\home\site\wwwroot\main.js:1:1980199) {
  rejection: ReferenceError: self is not defined
      at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
      at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
      at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
      at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
      at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
      at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
      at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
      at Zone.run (C:\home\site\wwwroot\main.js:1:1968989),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: ReferenceError: self is not defined
        at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
        at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
        at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
        at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
        at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
        at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
        at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
        at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: self is not defined
          at Object.8941 (C:\home\site\wwwroot\vendors-node_modules_editorjs_code_dist_bundle_js-node_modules_editorjs_editorjs_dist_editor_-77895d.js:1:492565)
          at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at Object.9353 (C:\home\site\wwwroot\src_app_shared_fluent-ui_editorjs_editorjs_component_ts-src_app_shared_fluent-ui_editorjs_edi-493a3d.js:1:2836)
          at __webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at Module.2913 (C:\home\site\wwwroot\src_app_questions_qsingle_qsingle_module_ts.js:1:6433)
          at Function.__webpack_require__ (C:\home\site\wwwroot\main.js:1:2670977)
          at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976150)
          at Object.onInvoke (C:\home\site\wwwroot\main.js:1:470317)
          at ZoneDelegate.invoke (C:\home\site\wwwroot\main.js:1:1976046)
          at Zone.run (C:\home\site\wwwroot\main.js:1:1968989)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

If there is a Solution, Please Suggest.

+1
I have tried all possible soultions out there and unable to solve it still

Teebo · 2021-09-16T08:30:20Z

@Chaitanya-yash if you have domino installed, try

const template = readFileSync(join(distFolder, INDEX_HTML_PATH)).toString();
const win = domino.createWindow(template.toString());

global['self'] = win;

Chaitanya-yash · 2021-09-16T10:11:34Z

@Teebo Yeah man. I did try domino. Ediotr.js still throws an exception about the window. Had the same problem with Localstorage but that is gone now. This one has been haunting me for a couple of days now.

const domino = require('domino');
const template = readFileSync('dist/browser/index.html').toString();
const win = domino.createWindow(template.toString());

global['window'] = win;
global['localStorage'] = localStorage;

Teebo · 2021-09-16T10:25:32Z

@Chaitanya-yash so you've also tried?
Note the 'self' being defined

global['window'] = win;
global['self'] = window;

Chaitanya-yash · 2021-09-16T10:48:40Z

@Teebo Yeah, I am getting the window error right now upon multiple builds. Self is not coming up
ReferenceError: window is not defined

Teebo · 2021-09-16T10:51:10Z

@Chaitanya-yash can you share you server.ts code?

Chaitanya-yash · 2021-09-16T10:57:55Z

@Teebo

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';
import 'localstorage-polyfill'

const distFolder = join(process.cwd(), 'dist/hbrdWeb/browser');

// const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
const domino = require('domino');
const template = readFileSync('dist/browser/index.html').toString();
const win = domino.createWindow(template.toString());

global['window'] = win;
global['localStorage'] = localStorage;
global['self'] = window;

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  // const distFolder = join(process.cwd(), 'dist/hbrdWeb/browser');
  // const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

Teebo · 2021-09-16T11:03:59Z

@Chaitanya-yash let's start by trying to move the below

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';

Move it underneath

global['window'] = win;
global['localStorage'] = localStorage;
global['self'] = window;

Teebo · 2021-09-16T11:05:32Z

@Chaitanya-yash the below works for me, I talk it from somewhere online, I still need to make sense of it all. Because some lines use win some use window. But yeah, that works for me


const template = readFileSync(join(distFolder, indexHtml)).toString();
const win = domino.createWindow(template.toString());


global['window'] = win;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['File'] = win.File;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['window'] = window;
global['Element'] = window.Element;
global['self'] = window;
global['IDBIndex'] = window.IDBIndex;
global['document'] = window.document;
global['getComputedStyle'] = window.getComputedStyle;
global['MutationObserver'] = getMockMutationObserver();
function getMockMutationObserver() {
  return class {
    observe(node, options) { }

    disconnect() { }

    takeRecords() {
      return [];
    }
  };
}
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  },
});
global['document'] = win.document;
global['CSS'] = null;

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';

Chaitanya-yash · 2021-09-16T13:01:12Z

I spun up a new Angular universal project, added EditorJS to it, initialised it new EditorJS() and I put everything on top in server.ts. It errored out giving the same error. @Teebo Thanks for helping out. Let me try something else.

Chaitanya-yash · 2021-09-16T14:59:38Z

@Teebo Can you share your the versions for Angular and EditorJS that you are using?

b2m9 · 2021-09-16T15:00:32Z

Can you please use the discussion forums of this repo to sort this out? Thanks.

EugeneGohh · 2021-10-04T07:07:22Z

This is how I fixed it:

const Editor = dynamic(() => import("./Editor"), { ssr: false });

newlegendmedia · 2021-11-21T20:59:52Z

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.

I am having the same issue. Did you find a solution for svelte-kit?

neSpecc added feature labels Feb 14, 2020

neSpecc mentioned this issue Feb 15, 2020

hi, how to use editor.js in nuxt.js, is there an example? #1038

Closed

neSpecc mentioned this issue Jul 29, 2020

ReferenceError: window is not defined: Server side rendering❓ #1254

Closed

neSpecc changed the title ~~Can't use by node.js import in Next.js~~ SSR support Nov 20, 2020

neSpecc mentioned this issue Nov 20, 2020

ReferenceError: Element is not defined #1407

Closed

gufranmirza mentioned this issue Jan 29, 2021

Support for SSR Jungwoo-An/react-editor-js#58

Open

This was referenced Jun 28, 2021

editor.js is not working with angular 11 universal (SSR).it is giving error "Reference Error: window not define".IS Editor.js has a angular ssr support...? #1616

Closed

Angular support #716

Closed

talyguryn removed feature labels Jan 17, 2022

codex-team locked and limited conversation to collaborators Jan 17, 2022

talyguryn converted this issue into discussion #1869 Jan 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

SSR support #1036

SSR support #1036

NoahMaizels commented Feb 13, 2020 •

edited by neSpecc

Loading

danilockthar commented Apr 2, 2020

findelallc commented Apr 28, 2020 •

edited

Loading

md-abdul-halim-rafi commented May 12, 2020

tkesgar commented Jun 13, 2020

Teebo commented Jul 29, 2020

Teebo commented Jul 29, 2020 •

edited

Loading

tkesgar commented Jul 29, 2020

b2m9 commented Jun 4, 2021

jbarrantesr92 commented Aug 7, 2021 •

edited

Loading

sisindrymedagam commented Aug 26, 2021 •

edited

Loading

tkesgar commented Aug 26, 2021

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021 •

edited

Loading

Chaitanya-yash commented Sep 16, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading

Chaitanya-yash commented Sep 16, 2021

Chaitanya-yash commented Sep 16, 2021

b2m9 commented Sep 16, 2021

EugeneGohh commented Oct 4, 2021

newlegendmedia commented Nov 21, 2021

This issue was moved to a discussion.

This issue was moved to a discussion.

SSR support #1036

SSR support #1036

Comments

NoahMaizels commented Feb 13, 2020 • edited by neSpecc Loading

danilockthar commented Apr 2, 2020

findelallc commented Apr 28, 2020 • edited Loading

md-abdul-halim-rafi commented May 12, 2020

tkesgar commented Jun 13, 2020

Teebo commented Jul 29, 2020

Teebo commented Jul 29, 2020 • edited Loading

tkesgar commented Jul 29, 2020

b2m9 commented Jun 4, 2021

jbarrantesr92 commented Aug 7, 2021 • edited Loading

sisindrymedagam commented Aug 26, 2021 • edited Loading

tkesgar commented Aug 26, 2021

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021 • edited Loading

Chaitanya-yash commented Sep 16, 2021 • edited Loading

Teebo commented Sep 16, 2021 • edited Loading

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021

Chaitanya-yash commented Sep 16, 2021

Teebo commented Sep 16, 2021 • edited Loading

Teebo commented Sep 16, 2021 • edited Loading

Chaitanya-yash commented Sep 16, 2021

Chaitanya-yash commented Sep 16, 2021

b2m9 commented Sep 16, 2021

EugeneGohh commented Oct 4, 2021

newlegendmedia commented Nov 21, 2021

This issue was moved to a discussion.

NoahMaizels commented Feb 13, 2020 •

edited by neSpecc

Loading

findelallc commented Apr 28, 2020 •

edited

Loading

Teebo commented Jul 29, 2020 •

edited

Loading

jbarrantesr92 commented Aug 7, 2021 •

edited

Loading

sisindrymedagam commented Aug 26, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading

Chaitanya-yash commented Sep 16, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading

Teebo commented Sep 16, 2021 •

edited

Loading