babel-node error 'Reference error: window is not defined'

Question

I was given the task to implement server-side rendering for a react application. I've followed the this tutorial: https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app and, afterwards, followed the exact steps on the actual application. Everything worked well with implementing the client-side rendering, but as soon as I continued with the server-side one, I got the following error: 'Reference error: window is not defined'
The problem is that the application uses scrollmagic, which is a client-side-only library (note: I added conditionals 'require' to any scrollmagic references in the code itself, but I can't find a way to bypass the module).
I thought about adding the scrollmagic library on the client-side, but as soon as I remove it I get an error from the 'require' statements.
I apologize if this is something obvious but I am new to JavaScript and have been searching for a couple of days and found nothing so far. If I can provide any additional information please let me know! Also, if you have any suggestions as to how I should handle this, I am all ears!

Best regards,
Andrew

Answer 1

The window object is a property of the browser/client, so you will not have access to it when executing javascript on the server. A library such as: https://www.npmjs.com/package/window-or-global can help, as well as adding conditional logic to check for the window object before executing code that depends on it.

Answer 2

In addition to the suggestion by @sconway to manually check for the presence of window when calling these client-side methods another method I have used in the past is to put that code in componentDidUpdate life-cycle method.

This method is guaranteed to not be called on the server, only on the client.