react-carousel: 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.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 8
- Comments: 16
Same here. I can’t import the
slidesToShowPluginplugin dynamically in Next.js without the entire page throwing an error.