<Carousel
sx={{ maxWidth: cardWidth }}
mx='auto'
// loop
withIndicators
controlSize={40}
controlsOffset='xs'
includeGapInSize={false}
height={cardWidth}
speed={5}
align='center'
nextControlLabel="Navigational Arrow for Image Carousel"
>
{paths.map((path, idx) => (
<Slide key={idx}>
<ImageWrapper src={path} width={cardWidth} />
</Slide>
))}
</Carousel>
enabling loop causes React18 to throw:
react-dom.development.js:86 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
This worked when paths was a static array, but crashes when i get paths from db fetching. (initially empty array)
error further down in trace:
embla-carousel.esm.js:1096 Uncaught TypeError: Cannot read properties of undefined (reading 'left')
at measureStartGap (embla-carousel.esm.js:1096:1)
at SlideSizes (embla-carousel.esm.js:1088:1)
at Engine (embla-carousel.esm.js:1181:1)
at activate (embla-carousel.esm.js:1431:1)
at EmblaCarousel (embla-carousel.esm.js:1592:1)
at embla-carousel-react.esm.js:52:37
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24931:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)