Carousel is undefined in nextjs
mfaizan1 opened this issue · comments
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.
@mfaizan1 did you find a good alternative for this?
@mfaizan1 did you find a good alternative for this?
yes i moved to react-responsive-carousel
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,
});
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?
@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?
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
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?
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
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
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
Same here. I can't import the slidesToShowPlugin
plugin dynamically in Next.js without the entire page throwing an error.
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 ...
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");
}
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.
@piotr-s-brainhub could you help us out?
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,
});
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.