NextJS 15 incompatibility

[heshamsaqqar]

• pure-react-carousel version: 1.32.0
• node version: 22.12.0
• react version: 19.x or 18.x
• nextJS version: 15

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

[JaceInglis]

I'm having the same issue here too. any suggestions?

[slorber]

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

Error: Can't render static file for pathname "/blog/2022/08/01/announcing-docusaurus-2.0"
            at generateStaticFile (/home/runner/work/docusaurus/docusaurus/packages/docusaurus/lib/ssg/ssg.js:167:15)
            at async /home/runner/work/docusaurus/docusaurus/node_modules/p-map/index.js:57:22 {
          [cause]: RangeError: Maximum call stack size exceeded
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5933)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:2[56](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:57):1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:[59](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:60)82)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:[62](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:63)90)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:[63](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:64)75)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:[66](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:67)28)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:63[75](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:76))
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:5982)
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
              at cloneUnlessOtherwiseSpecified (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:59[82](https://github.com/facebook/docusaurus/actions/runs/12318799990/job/34385568691?pr=10763#step:6:83))
              at eval (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6375)
              at Array.forEach (<anonymous>)
              at mergeObject (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6290)
              at deepmerge (eval at ./node_modules/pure-react-carousel/dist/index.es.js (/home/runner/work/docusaurus/docusaurus/website/build/__server/content---blog-authors-j-marceyee-4-8b3.js:256:1), <anonymous>:22:6628)
        }
      ]
    }
  }
}

I'm investigating, but I suspect for my project this only happens when using React 19 with the dev build.

I'm on pure-react-carousel@1.30.1

---

Edit: can also reproduce on v1.32.0

Docusaurus PR that currently fails CI: facebook/docusaurus#10763

• ✅ yarn build:website:fast works
• ❌ yarn build:website:fast --dev fails

[slorber]

I investigated a bit and found where the problem comes from:

• You are "embedding" a pre-built version of deepmerge (v2.2.1, 6y old version) that may have bugs?
• The WithStore HOC is calling deepMerge(this.state,this.props) and it fails

According to my investigation, this happens due to trying to deepmerge this.props.children

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:

• Using <Slide> with a custom component children (or array)
• Using React 19
• Using DEV build of ReacT (process.env.NODE_ENV === 'development')

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/',
        },
      ]}
    />
  );
}

[JeffBeltran]

thanks for reporting this, pulling my hair out trying to narrow this down... i suspect this will get more notice as folks start moving over

[msanguineti]

Getting a similar issue with an InternalError: too much recursion. I've just updated to Next 15. This happens even if I strip every custom modification to my carousel and use a super simple one.

[davepoon]

I have the same issue with my CMS project, which extensively uses a Pure React Carousel, so I can't upgrade React to version 19 until this issue is resolved.
This issue will cause the page containing the carousel to crash, and the Jest test will also fail.

[thepunkyone]

Experiencing the same error RangeError: Maximum call stack size exceeded after upgrading to NextJs v15 and React v19.

[Paiman-Rasoli]

After upgrading next to version 15 the package not working and throw below error:

[pstachula-dev]

I have simillar problems. It is connected with React 19 not Next.

After all I used my own port of Pure-react-carousel.

You can try react-micro-carousel

[davepoon]

This is not usable in React 19, so is there any plan to make this work in React 19?

[rob-myers]

...deepmerge(this.state, {...this.props,children: null}),
children: this.props.children,
}

Thanks for the help @slorber !

To get this working in Next.js 15.2.1 I patched
node_modules/pure-react-carousel/dist/index.es.js, which amounts to replacing a single instance of deepmerge_1(this.state,this.props) with:

{
  ...deepmerge_1(this.state, {...this.props,children: null}, e),
  children: this.props.children,
}

[davepoon]

In the end, I spent an hour rewriting and migrating a Media Gallery component from Pure React Carousel to Embla Carousel.