window is not defined

[nescha]

An error happens during build after recent update to @brainhubeu/react-carousel@1.12.6:
ReferenceError: window is not defined at Object.<anonymous> ([ROOT]/react/node_modules/ brainhubeu/react-carousel/lib/react-carousel.js:1:279

[piotr-s-brainhub]

@nescha

do you use server-side rendering?

[piotr-s-brainhub]

@slmr

do you use server-side rendering?

[Neddz]

I started having the same issue with this library. I use Gatsby and can confirm it no longer works with SSR.

[Sorvereign]

Hi, I was having the same issue with NextJS, I tried to check the source code but I didn't find anything weird so I find a solution for this. What I did was dynamic importing with no SSR

So, instead of the traditional importing:
import Carousel from '@brainhubeu/react-carousel'

Do:

//This first
import dynamic from 'next/dynamic';

const Carousel = dynamic(
() => import ('@brainhubeu/react-carousel'),
{
ssr: false
}
)

This works for me, have a nice day.

[piotr-s-brainhub]

@nescha @Neddz @Sorvereign

I have a workaround #292
I published it as @brainhubeu/react-carousel@1.12.9-alpha.
Could you check whether it works for you?
Do you think my workaround is better or using next?

[jannispaul]

I have the same issue (using Gatsby) and your workaround works for me. Thanks!

[nescha]

@nescha @Neddz @Sorvereign

I have a workaround #292
I published it as @brainhubeu/react-carousel@1.12.9-alpha.
Could you check whether it works for you?
Do you think my workaround is better or using next?

It seems it works for me.
Yes, I do use NextJS and SSR

[semy]

Hey @piotr-s-brainhub, for me, this workaround unfortunately does not work.

I use NextJS 9.2.3 with SSR.

[piotr-s-brainhub]

@semy

But SSR with @brainhubeu/react-carousel and NextJS works for you?
With my workaround (@brainhubeu/react-carousel@1.12.9-alpha), what issues do you encounter?

[semy]

Okay, for some reason it works now. However, the component ignores the width of the outer element :-/ Is there any solution?

[piotr-s-brainhub]

@semy

do you encounter the same problem without SSR or only with SSR?

[piotr-s-brainhub]

@nescha @Neddz @Sorvereign @jannispaul @semy

does this example https://github.com/brainhubeu/react-carousel/pull/301/files work for you?

[xvvvyz]

For those using Gatsby, here's a horrible & gross hack to work around this issue:

// gatsby-node.js

module.exports.onPreInit = () => {
  const carouselSrcFile =
    'node_modules/@brainhubeu/react-carousel/lib/react-carousel.js';

  if (!fs.existsSync(carouselSrcFile)) return;

  fs.writeFileSync(
    carouselSrcFile,
    fs
      .readFileSync(carouselSrcFile, 'utf8')
      .replace('(window,', `(typeof window==='undefined'?{}:window,`)
  );
};

[piotr-s-brainhub]

@cadejscroggins

Does this hack really work?
Isn't it a problem that in the browser window isn't an empty object?

[xvvvyz]

@piotr-s-brainhub it works. When rendered in a browser, window is available and is passed to the IIFE as normal since it's not undefined.

[piotr-s-brainhub]

@cadejscroggins

so does the @brainhubeu/react-carousel@1.12.9-alpha work for you as well?
if yes, we can consider, including this workaround in each version

[xvvvyz]

@piotr-s-brainhub it does. Including it in future releases would be very helpful.

[microbit-matt-hillsdon]

See possible fix via webpack config to reinstate webpack 3 behaviour on #344.

[tramax]

If you use Dots and have problem with undefined component using the { default: Carousel, Dots } import syntax mentioned in the readme, try importing like this:

import dynamic from 'next/dynamic';

const Carousel = dynamic(
  () => import('@brainhubeu/react-carousel'),
  { ssr: false },
);

const Dots = dynamic(
  () => import('@brainhubeu/react-carousel').then(module => module.Dots),
  { ssr: false },
);

[tysbrown]

Was having this issue only when deploying to Netlify, everything ran fine on my local Gatsby dev server.

@piotr-s-brainhub Your patch worked great! Thanks for the fix.

EDIT: I spoke too soon, now for some reason the plugins aren't working? Specifically the slidesToShowPlugin and arrowsPlugin.

LATEST EDIT: Rather than using the older version/patch, Gatsby has a solution for these kinds of SSR errors using this package and using it to import the component (in this case, the carousel component):

const Carousel = loadable(() => import("./Carousel"));

This finally solved the issue for me!

[lorraineS]

Was having this issue only when deploying to Netlify, everything ran fine on my local Gatsby dev server.

@piotr-s-brainhub Your patch worked great! Thanks for the fix.

EDIT: I spoke too soon, now for some reason the plugins aren't working? Specifically the slidesToShowPlugin and arrowsPlugin.

LATEST EDIT: Rather than using the older version/patch, Gatsby has a solution for these kinds of SSR errors using this package and using it to import the component (in this case, the carousel component):

const Carousel = loadable(() => import("./Carousel"));

This finally solved the issue for me!

How did you make the plugins work (slidesToShowPlugin, autoplayPlugin, etc ...) ?