Carousel Component

• components: Carousel
• reactstrap version ^9.2.3
• import method es
• react version ^19.00
• bootstrap version ^5.3.3

What is happening?

What should be happening?

Steps to reproduce issue

1. Install react 19
2. Install react starp
3. install bootstrap
4. import either in index.html or in file in which carousel is implemented as said in reactstrap installation guide. Below is the link which, I have follwed. https://reactstrap.github.io/?path=/docs/home-installation--page

Error message in console

hook.js:608 TypeError: import_react_dom2.default.findDOMNode is not a function

The above error occurred in the component.

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary. Error Component Stack at CarouselComponent (CarouselComponent.jsx:5:40)

paste error message with stacktrack here

hook.js:608 React Router caught the following error during render TypeError: import_react_dom2.default.findDOMNode is not a function at Transition2.performEnter (reactstrap.js?v=f2946b18:6163:79) at Transition2.updateStatus (reactstrap.js?v=f2946b18:6149:14) at Transition2.componentDidUpdate (reactstrap.js?v=f2946b18:6118:10) at react-stack-bottom-frame (react-dom_client.js?v=f2946b18:16216:22) at runWithFiberInDEV (react-dom_client.js?v=f2946b18:724:18) at commitLayoutEffectOnFiber (react-dom_client.js?v=f2946b18:8269:68) at recursivelyTraverseLayoutEffects (react-dom_client.js?v=f2946b18:8985:13) at commitLayoutEffectOnFiber (react-dom_client.js?v=f2946b18:8236:13) at recursivelyTraverseLayoutEffects (react-dom_client.js?v=f2946b18:8985:13) at commitLayoutEffectOnFiber (react-dom_client.js?v=f2946b18:8323:13) {componentStack: '\n at Transition2 (http://localhost:3000/node_mo…rProvider2 ()\n at App ()'} Error Component Stack at RenderErrorBoundary (chunk-NGB2J722.js?v=f2946b18:5328:5) at DataRoutes (chunk-NGB2J722.js?v=f2946b18:5957:3) at Router (chunk-NGB2J722.js?v=f2946b18:6042:13) at RouterProvider (chunk-NGB2J722.js?v=f2946b18:5787:3) at RouterProvider2 () at App [()](

)

Code

import React, {useState} from 'react'; // import 'bootstrap/dist/css/bootstrap.min.css'; import { Carousel, CarouselItem, CarouselCaption, CarouselControl,CarouselIndicators } from 'reactstrap'; const CarouselComponent = ()=>{ const[isAnimating, setAnimating] = useState(false) const[activeIndex, setActiveIndex] = useState(0); const items = [ { src:'https://picsum.photos/id/123/1200/400', altText:'Slide 1 Not Found', caption:'Slide 1', key:1 }, { src:'https://picsum.photos/id/476/1200/400', altText:'Slide 2 Not Found', caption:'Slide 2', ket:2 }, { src:'https://picsum.photos/id/658/1200/400', altText:'Slide 3 Not Found', caption:'Slide 3', key:3 }, { src:'https://picsum.photos/id/323/1200/400', altText:'Slide 4 Not Found', caption:'Slide 4', key:4

    }
]
const previous = ()=>{
    if(isAnimating) return;

    const previousIndex = activeIndex === 0 ? items.length - activeIndex: activeIndex -1;
    setActiveIndex(previousIndex)

}

const next = ()=>{
    if(isAnimating) return;
    const nextIndex = activeIndex === items.length - 1?0: activeIndex + 1;
    setActiveIndex(nextIndex)

}

const goToIndex = (newIndex)=>{
    if(isAnimating) return;
    setActiveIndex(newIndex)

}
const slides = items.map((item)=>{
    return(
        <CarouselItem
        onExiting = {()=>setAnimating(true)}
        onExited = {()=>setAnimating(false)}
        key={item.src}
        >
        <img
        src = {item.src}
        alt = {item.altText}
        style = {{width:"100%"}}
        />        
        <CarouselCaption
        captionText = {item.caption}
        captionHeader = {item.caption}
        />
        </CarouselItem>
        )
})

return(
    
    <Carousel
    activeIndex={activeIndex}
    next={next}
    previous={previous}
    >
    <CarouselIndicators 
    items={items}
    activeIndex={activeIndex}
    onClickHandler={goToIndex}
    />
    {slides}
    <CarouselControl
        direction = "prev"
        directionText='Previous'
        onClickHandler={previous}
    />
    <CarouselControl
        direction='next'
        directionText='Next'
        onClickHandler={next}
    />
    </Carousel>
    
)

}

export default CarouselComponent