SSR issue: window not defined

Question

We are using react as client framework for building a SPA. In disconnected mode it works well but then in integrated mode I see the below error when we browse the page or preview it.

Any clue as to what's missing in here?

Answer 1

The window object is not available during server side rendering because Node.js does not have a window object - it is a browser construct. This is a scenario common to server side rendering (SSR) and JavaScript - it is not specific to JSS.

That said, there are different ways to workaround the problem depending on your app and what is actually trying to use window. If it's your code, then try to move any references to window into the componentDidMount method - that is the appropriate place to interact directly with the DOM in React. Also, componentDidMount is not invoked during SSR.

If the code that is referencing window is in a 3rd party package/module, then you will want to try to conditionally load that package during rendering. Or conditionally render components from that package when window is available, e.g.

if (typeof window !== 'undefined') {
  // it's safe to use window now
}

Again, there are several ways to handle this scenario, it largely depends on your situation and application. The primary takeaway is that during SSR you cannot use code that references the browser-specific constructs or objects like window or the DOM.

Related questions:

JSS Vue - getting error in server.bundle on deploy

JSS vue - Error with server.bundle.js after jss deploy package