React (isomorphic server side) integration - ReferenceError: window is not defined

[YarivGilad]

Hi, Thank you for this cool library! Is there a working example of flickity with react rendered on the server side?? I'm trying to integrate flickity in an isomorphic app which renders react also on the server using this gist and get the following error:

\node_modules\flickity\js\index.js:40
})( window, function factory( Flickity ) {
    ^
ReferenceError: window is not defined

Do you have any idea how to solve this issue? Cheers Ajar

[desandro]

Flickity is designed for browser environments. You'll have to look into solutions around window on server-side environments.

[YarivGilad]

Hi @desandro and thank you for responding. What do you suggest? that I alter your code or use another library for this scenario? Looking for a way around window is the reason I opened this issue... I was hoping that you will take interest in amending your codebase since universal apps are becoming more wide spread and react-redux are becoming the standard with universal apps...

[desandro]

One solution is to change the global window argument to this. In browsers this will be window, but server side, it will be the global object.

[YarivGilad]

Sounds promising... There is also this one to check if you have a reference to the window and thus be running on the client...

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

Can't wait for you to implement it so it could be used in Universal apps... Good luck!

[pullenworks]

Does anyone have a solution for this? Can't seem to work it out my end! Banging my head against the wall. Cheers.

[smartmike]

You can use Webpack ProvidePlugin to give the bundle the reference to Flickity in the browser, while not importing it for the server

new webpack.ProvidePlugin({
  Flickity: 'flickity',
})

[juhaelee]

@desandro can we progress with using this for SSR? I see that you did the same in https://github.com/desandro/imagesloaded/pull/178

[csantos1113]

Would be nice to check implemented at the library level. Thanks

[allealdine]

For those who want to use slides in SSR, this is one of the option: https://reactstrap.github.io/components/carousel/

[Guyda]

Something I found on the react-flickity-component issues page:

 const Flickity =
   typeof window !== "undefined"
     ? require("react-flickity-component")
     : () => null

see here: https://github.com/theolampert/react-flickity-component/issues/4#issuecomment-486740187

[frazerf]

Hi @Guyda , I've just stumbled across your answer. I've got the same problem re. window error. Are you adding this directly below the imports? And are you excluding import Flickity from 'react-flickity-component'

Thanks

[Guyda]

@frazerf I put that code instead of the import. It just blocks it from importing while the server is rendering but works when the client side kicks in. Hope this helps.

[frazerf]

Damn, sadly mine still hits me with that error @Guyda . Thanks anyway!

[EdgarNigel]

Hi @frazerf, were you able to find a solution? if I replace the import statement wtih @Guyda 's code above I get anInternal server error: Flickity is not a constructor while initializing with vannila JS. Initializing in HTML doesn't work either.