Gatsby Build - SSR failed

[lorraineS]

Hello,

I've been trying to use react-carousel in my project, while it works in development, it doesn't when I try to build.

I have read all the posts that deal with this problem and I manage to partially solve it EXCEPT when I have to use slidesToShowPlugin and autoplayPlugin.

Here is my import which works locally :
import Carousel, { slidesToShowPlugin, autoplayPlugin } from '@brainhubeu/react-carousel';

I changed it to this one:
const Carousel = loadable(() => import('@brainhubeu/react-carousel'))

show me errors :

45:26  error  'autoplayPlugin' is not defined      no-undef
56:29  error  'slidesToShowPlugin' is not defined  no-undef

My Carousel component refers to several plugins:

<Carousel
            offset={30}
            minDraggableOffset={0}
            keepDirectionWhenDragging={true}
            plugins={[
              {
                resolve: autoplayPlugin,
                options: {
                  interval: 4000,
                }
              },
            ]}
            animationSpeed={1000}
            breakpoints={{
              900: {
                plugins: [
                 {
                   resolve: slidesToShowPlugin,
                   options: {
                    numberOfSlides: 1
                   }
                 },
               ]
              }
            }}
          >
            {props.list.map(item) => {
              return (
                <CardV3
                  title={item.title}
                />
              )
            })}
</Carousel>

I specify that I use Gatsby and not Next.js. So I used the "loadable" library which is mentioned by another user (last message here : #287) and which works well, except when it is also necessary to import plugins from Carousel.

Thanks

[Amit Dhiman]

I can't use it in nextjs

ReferenceError: window is not defined
    at Yo node_modules/@brainhubeu/react-carousel/lib/react-carousel.js:2:100449

It would be great to have SSR support.

[Kenn]

Facing the same issue: undefined (window) in SSR

[Marcello Angelini]

In these cases I usually wrap it into something like this:

`function Page({ render = "effect", children } = {}) {
const [hasRenderedOnClient, setHasRendered] = React.useState(false);

React.useEffect(() => {
setHasRendered(true);
}, []);

if (render === "effect" && !hasRenderedOnClient) {
return null;
}

if (render === "effect-seo" && !hasRenderedOnClient) {
return <div style={{ visibility: "hidden" }}>{children};
}

return <>{children}</>;`

so it renders when useEffect kicks in on the client.
Only downside is that js has to be downloaded in order to see the carousel

[Deleted user]

why do you call this react-carousel? carousel doesn't work with react, gatsby, or next..there are 3 more closed(!) window issues related to this...dynamic import doesn't bring the module and why should we dynamic import anyway...