NextJS 15 incompatibility #476
Comments
|
I'm having the same issue here too. any suggestions? |
|
I'm the Docusaurus maintainer and also using this lib on our Docusaurus.io website While trying to upgrade to React 19, I see that this lib produces errors in our CI: https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763 I'm investigating, but I suspect for my project this only happens when using React 19 with the dev build. I'm on Edit: can also reproduce on v1.32.0 Docusaurus PR that currently fails CI: facebook/docusaurus#10763
|
|
I investigated a bit and found where the problem comes from:
According to my investigation, this happens due to trying to deepmerge If I change the merge strategy to merge the children shalowly, it works again: {
...deepmerge(this.state, {...this.props,children: null}),
children: this.props.children,
}Note: this only happens in dev mode with React 19 for me. I suspect this is due to some recent work done in React 19 debugging system, that may have changed the JSX structure and made it "unclonable" by this older version of deepmerge. In my case, I won't investigate further and will try to remove this lib that is not critical to our site. I just wanted to report my finding for those looking for a solution you can apply with patch-package, until lib author fixes the problem. In case it helps, here's the code we used that lead to the problem. I suspect this is due to a combination of the following:
import React, {type ComponentProps, type ReactNode} from 'react';
import {
CarouselProvider,
Slider,
Slide,
ButtonBack,
ButtonNext,
DotGroup,
} from 'pure-react-carousel';
import Link from '@docusaurus/Link';
import Image from '@theme/IdealImage';
import 'pure-react-carousel/dist/react-carousel.es.css';
import styles from './ShowcaseCarousel.module.css';
type Site = {
name: string;
image: ComponentProps<typeof Image>['img'];
url: string;
};
function SiteSlide({index, site}: {index: number; site: Site}) {
return (
<Slide index={index} className={styles.siteSlide}>
<Image
img={site.image}
alt={site.name}
loading={index === 0 ? 'eager' : 'lazy'}
/>
<Link to={site.url} className={styles.siteLink} target="_blank">
🔗 {site.name}
</Link>
</Slide>
);
}
export default function ShowcaseCarousel({
sites,
aspectRatio,
}: {
sites: Site[];
aspectRatio: number;
}): ReactNode {
return (
<CarouselProvider
naturalSlideWidth={1}
naturalSlideHeight={1 / aspectRatio}
totalSlides={sites.length}
infinite
className={styles.carousel}>
<Slider>
{sites.map((site, index) => (
<SiteSlide key={index} index={index} site={site} />
))}
</Slider>
<ButtonNext className={styles.navButton} style={{right: -20}}>
{'>'}
</ButtonNext>
<ButtonBack className={styles.navButton} style={{left: -20}}>
{'<'}
</ButtonBack>
<DotGroup className={styles.dotGroup} />
</CarouselProvider>
);
}
export function ShowcaseCarouselV1(): ReactNode {
return (
<ShowcaseCarousel
aspectRatio={1072 / 584}
sites={[
{
name: 'Prettier',
image: require('./img/v1/prettier.png'),
url: 'https://prettier.io/',
},
{
name: 'Babel',
image: require('./img/v1/babel.png'),
url: 'https://babeljs.io/',
},
{
name: 'React-Native',
image: require('./img/v1/react-native.png'),
url: 'https://archive.reactnative.dev/',
},
{
name: 'Katex',
image: require('./img/v1/katex.png'),
url: 'https://katex.org/docs/',
},
{
name: 'Docusaurus',
image: require('./img/v1/docusaurus.png'),
url: 'https://v1.docusaurus.io/',
},
]}
/>
);
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
pure-react-carouselversion: 1.32.0nodeversion: 22.12.0reactversion: 19.x or 18.xnextJSversion: 15What I did:
In my private project, I upgraded from Next.js 14 to Next.js 15 and tested with both React 18 and React 19, but encountered the same issue in both cases.
What happened:
All pages using the carousel component crashed, displaying the following error message:
RangeError: Maximum call stack size exceeded
Reproduction:
You can reproduce the issue with the following testing repository:
https://github.com/heshamsaqqar/pure-carousel-app
Problem description:
After upgrading the framework, the library stopped working completely, regardless of whether I used React 18 or 19. Was working fine before with Next 14 & React 18.
Any advice would be greatly appreciated!
Thanks.
The text was updated successfully, but these errors were encountered: