Window not defined in SSR about react-awesome-slider HOT 4 CLOSED

I ended up copying the build file and adding some safety checks to usage of window. There were only about 10 changes needed to make it work. Copy this file to your project and import it instead of the react-awesome-slider NPM distribution.

https://gist.github.com/hollowaysmith/c359b0530420ac955108e8579bddd537

It works for me in Gatsby with this change.

@rcaferati SSR just needs safety checks around window before using it. Ie,

before:

window.requestAnimationFrame(() => {  (stuff) }

after:

window && window.requestAnimationFrame(() => {  (stuff) }

I'd prefer to use your distribution if this was fixed 😄

from react-awesome-slider.

any answer about how solve this ?

from react-awesome-slider.

If you are using something like nextjs you can do

import dynamic from 'next/dynamic';
import * as React from 'react';

/*
This requires access to the window so we need to dynamically import it with no SSR
 */
const AwesomeSlider = dynamic(() => import('react-awesome-slider'), {
  ssr: false
});

export default AwesomeSlider;

and then import the css and use it like normal.

from react-awesome-slider.

@stephenbaldwin thanks for raising it. Fixed on v1.1.0. If you guys find any issues with it, just comment here.

from react-awesome-slider.