Carousel is undefined in nextjs

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.

[pdugan20]

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

[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.