1

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?

enter image description here

  • I don't know much about JSS yet, but is everything published? Is this when you browse the page or use the Experience editor? As a guess, it might have something to do with the server side rendering of the react app, is node installed on the server correctly? – Gravypower Feb 4 at 2:40
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.