Carousel is undefined in nextjs

[mfaizan1]

Describe the bug I am trying to use carousel in reactjs it was working fine and now i am moving to nextjs.

To Reproduce Steps to reproduce the behavior, here is fairly simple implementation of carousel i am trying to achieve, there is a lot of more code to be added but this should work as it in current state then i can move forward

import React from "react";
import dynamic from "next/dynamic";
const { default: Carousel } = dynamic(
  () => require("@brainhubeu/react-carousel"),
  { ssr: false }
);
import "@brainhubeu/react-carousel/lib/style.css";
import useStyles from "./Scrolling.styles";

function ScrollingEvents({ events }) {
  console.log(Carousel, "check1");
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  if (!events) {
    return <p>hello</p>;
  }
  const onchange = (value) => {
    setValue(value);
  };

  const breakpoints = {
    1150: {
      slidesPerPage: 3,
      clickToChange: true,
      animationSpeed: 2000,
      arrows: false,
    },
    800: {
      slidesPerPage: 2,
      clickToChange: true,
      infinite: true,
      animationSpeed: 2000,
      arrows: false,
    },
    500: {
      slidesPerPage: 1,
      slidesPerScroll: 1,
      clickToChange: false,
      centered: true,
      animationSpeed: 2000,
      infinite: true,
      arrows: false,
    },
  };
  return (
    <Carousel
      value={value}
      slides={[<p>hello 1</p>, <p>hello 2</p>, <p>hello 3</p>]}
      slidesPerPage={3}
      infinite
      animationSpeed={2000}
      breakpoints={breakpoints}
      arrows
    />
  );
}

export default ScrollingEvents;

Expected behavior Carousel chould render without any error Screenshots

Environment

System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 56.46 MB / 8.00 GB
    Shell: 5.0.11 - /usr/local/bin/bash
  Binaries:
    Node: 14.8.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 87.1.18.77
    Chrome: 89.0.4389.72
    Edge: 88.0.705.81
    Firefox: 85.0.2
    Safari: 14.0.1
  npmPackages:
    @brainhubeu/react-carousel: ^1.19.26 => 1.19.26 

• desktop
• Browser : Chrome

Additional context My package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3005",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@brainhubeu/react-carousel": "^1.19.26",
    "@material-ui/core": "^4.11.3",
    "axios": "^0.21.1",
    "classnames": "^2.2.6",
    "next": "10.0.7",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

if i return any plain component from this component it works fine, as soon as i try to return carousel it throws above error.

i tried loogin Carousel to see if it is available but it was undefined so i think that might be the reason of this error.

[BrunoQuaresma]

@mfaizan1 did you find a good alternative for this?

[mfaizan1]

@mfaizan1 did you find a good alternative for this?

yes i moved to react-responsive-carousel

[danicunhac]

It seems that

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

doesn't work right now. I've manage to import it by not destructuring:

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

[makovez]

It seems that

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

doesn't work right now. I've manage to import it by not destructuring:

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

what's dynamic() function?

[makovez]

@mfaizan1 did you find a good alternative for this?

yes i moved to react-responsive-carousel

it doesen't work to me for nextjs, how did you make it work?

[danicunhac]

It seems that

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

doesn't work right now. I've manage to import it by not destructuring:

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

what's dynamic() function?

dynamic is a nextjs' function to do dynamic imports, imported from 'next/dynamic'.

Anyway, I've changed lib to nuka-carousel, as it lets the developer to better customize the arrows and it's container

[makovez]

Thanks @danicunhac. I have tried your import and it works but as soon as i try to import Dots it fails with the error from @mfaizan1 . I was looking for a carousel lib to already handle the thumbnails images but nuka-carousel doesen't have. Does it at least support nextjs?

[danicunhac]

Thanks @danicunhac. I have tried your import and it works but as soon as i try to import Dots it fails with the error from @mfaizan1 . I was looking for a carousel lib to already handle the thumbnails images but nuka-carousel doesen't have. Does it at least support nextjs?

It does, and you don't neeed to use dynamic import for it. I didnt use the react-carousel Dots, but I managed to import it normally

[makovez]

Thanks @danicunhac. I have tried your import and it works but as soon as i try to import Dots it fails with the error from @mfaizan1 . I was looking for a carousel lib to already handle the thumbnails images but nuka-carousel doesen't have. Does it at least support nextjs?

It does, and you don't neeed to use dynamic import for it. I didnt use the react-carousel Dots, but I managed to import it normally

Yes, import works but using the example for thumbnails, doesen't work anymore with that error

[danicunhac]

Thanks @danicunhac. I have tried your import and it works but as soon as i try to import Dots it fails with the error from @mfaizan1 . I was looking for a carousel lib to already handle the thumbnails images but nuka-carousel doesen't have. Does it at least support nextjs?

It does, and you don't neeed to use dynamic import for it. I didnt use the react-carousel Dots, but I managed to import it normally

Yes, import works but using the example for thumbnails, doesen't work anymore with that error

I haven't tried to use the thumbnails

[pdugan20]

Same here. I can't import the slidesToShowPlugin plugin dynamically in Next.js without the entire page throwing an error.

[lorraineS]

Same here. I can't import the slidesToShowPlugin plugin dynamically in Next.js without the entire page throwing an error.

Did you find a solution to make the plugins work? Thanks ...

[krehwell]

Edit: this only works on firefox :(

For me I make it only Carousel imported using dynamic. This way works for me:

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

import { arrowsPlugin } from "@brainhubeu/react-carousel";

And in case worry for css import I do it like so

if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
    import("@brainhubeu/react-carousel/lib/style.css");
}

[dbloembe]

Has anyone found a fix for this? Having the same issue as @pdugan20:

I can't import the slidesToShowPlugin plugin dynamically in Next.js without the entire page throwing an error.

Seeing this error:

@piotr-s-brainhub could you help us out?

[rikinshah23]

Use it like this for nextjs -

use dynamic to import the main Carousel component but import slidesToShowPlugin the normal way.

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

[olehwebdev]

Hi folks, I had the same issue in my monorepo project (Next.js/React-Native), I had two different react and react-dom versions inside for Mobile and Web packages.