0

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.

HelpMeStackOverflowMyOnlyHope
  • 4,852
  • 10
  • 32
  • 49
  • 1
    You could use `require` in componentDidMount, other than that you could stub window but I don't think that's a good idea. Or you could just write a slider in react or use one built for react ;) – Dominic Nov 03 '15 at 10:58
  • Window is a browser attribute so you won't have access to it on the server. – J. Mark Stevens Nov 03 '15 at 14:38

1 Answers1

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.

Soichi Takamura
  • 165
  • 11