[SOLVED] Error to create a carousel with a pure-react-carousel

Error to create a carousel with a pure-react-carousel

may you help me? I'm trying to create a carousel with pure-react-carousel but I'm getting the error: RangeError: Maximum call stack size exceeded Below is the MRE:

Index:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

React Component

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

const CarouselTest = () => {
    return (
        <CarouselProvider
            visibleSlides={1}
            step={1}
            totalSlides={3}
            isIntrinsicHeight={true}
        >
            <Slider>
                <Slide index={0}>First Slide</Slide>
                <Slide index={1}>Second Slide</Slide>
                <Slide index={2}>Third Slide</Slide>
            </Slider>
            <ButtonBack>Anterior</ButtonBack>
            <ButtonNext>Próximo</ButtonNext>
        </CarouselProvider>
    );
};

export default CarouselTest;

The error seems to be related to an infinite loop, but I can't find the reason.

An error occurred in the component.

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

Solution

Remove isIntrinsicHeight and Use naturalSlideWidth & naturalSlideHeight The isIntrinsicHeight prop sometimes causes issues. Instead, explicitly define the naturalSlideWidth and naturalSlideHeight:

<CarouselProvider
    visibleSlides={1}
    step={1}
    totalSlides={3}
    naturalSlideWidth={100} 
    naturalSlideHeight={125} 
>