Skip to content

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

@Teebo

Description

@Teebo

I am using Editor.js with Angular.

In my code, I am checking if the window is available before I initialize Editor.js with the new keword.

When building for server-side rendering, I get an error that the window is undefined.
If I comment the Editor.js initialization, the SSR build succeeds, I reckon that the error is caused by Editor.js.

I also have domino to mock the window object with the below output.

<ref *2> {
  document: <ref *1> {
    parentNode: null,
    _previousSibling: [Circular *1],
    _nextSibling: [Circular *1],
    _index: undefined,
    _childNodes: null,
    _firstChild: {
      parentNode: [Circular *1],
      _previousSibling: [HTMLHtmlElement],
      _nextSibling: [HTMLHtmlElement],
      _index: undefined,
      nodeType: 10,
      ownerDocument: [Circular *1],
      name: 'html',
      publicId: '',
      systemId: '',
      _nid: 2
    },
    nodeType: 9,
    isHTML: true,
    _address: 'about:blank',
    readyState: 'loading',
    implementation: { contextObject: [Circular *1] },
    ownerDocument: null,
    _contentType: 'text/html',
    doctype: {
      parentNode: [Circular *1],
      _previousSibling: [HTMLHtmlElement],
      _nextSibling: [HTMLHtmlElement],
      _index: undefined,
      nodeType: 10,
      ownerDocument: [Circular *1],
      name: 'html',
      publicId: '',
      systemId: '',
      _nid: 2
    },
    documentElement: HTMLHtmlElement {
      parentNode: [Circular *1],
      _previousSibling: [Object],
      _nextSibling: [Object],
      _index: undefined,
      _childNodes: null,
      _firstChild: [HTMLHeadElement],
      nodeType: 1,
      ownerDocument: [Circular *1],
      localName: 'html',
      namespaceURI: 'http://www.w3.org/1999/xhtml',
      prefix: null,
      _tagName: undefined,
      _attrsByQName: [Object: null prototype],
      _attrsByLName: [Object: null prototype],
      _attrKeys: [Array],
      _nid: 3
    },
    _templateDocCache: null,
    _nodeIterators: null,
    _nid: 1,
    _nextnid: 34,
    _nodes: [
      null,                [Circular *1],
      [Object],            [HTMLHtmlElement],
      [HTMLHeadElement],   [Object],
      [HTMLMetaElement],   [Object],
      [HTMLTitleElement],  [Object],
      [Object],            [HTMLBaseElement],
      [Object],            [HTMLMetaElement],
      [Object],            [HTMLLinkElement],
      [Object],            [HTMLLinkElement],
      [Object],            [Object],
      [Object],            [HTMLLinkElement],
      [Object],            [HTMLBodyElement],
      [Object],            [HTMLUnknownElement],
      [Object],            [HTMLScriptElement],
      [HTMLScriptElement], [HTMLScriptElement],
      [HTMLScriptElement], [HTMLScriptElement],
      [HTMLScriptElement], [Object]
    ],
    byId: [Object: null prototype] {},
    modclock: 1,
    _scripting_enabled: true,
    defaultView: [Circular *2]
  },
  location: Location { _window: [Circular *2], _href: 'about:blank' }

The window object is available in the global scope of NodeJS when building for SSR.
Now I am just wondering what can be done to Editor.js to avoid this.

Is it possible to resolve this issue from Editor.js?
What can I do to circumvent this issue?
Why is new Editor(...) giving an error even when a check is being made if we are in the browser?
Why do I get the error even when the window object is available in Node?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions