server side rendering for react, webpack, node project breaking because 'window' undefined

Question

I get the following error when trying to do server-side rendering with components that reference window. For example when I include slick-carousel (https://github.com/kenwheeler/slick) I get the following error:

var Slick = window.Slick || {};
            ^
ReferenceError: window is not defined

I know its because window is not defined when trying to do SSR, but don't know what the best strategy is to avoid the error.

Answer 1

Basically components should not depend on DOM. Only, some hook methods such as componentDidMount can, where you use .offsetHeight and modify style or whatever. That's why react and react-dom packages are separated.

Instead of passing object by window.XXX, think about using decent dependency solution like require.