#Carousel, 'loop' flag is causing React 18 to crash

7 messages · Page 1 of 1 (latest)

thorn mauve
#
<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)
#

Slide is Carousel.Slide after destructuring

#

can't post github as it's a private repo

thorn mauve
#

hmm, I added an Array.isArray() check and cleared the error on Chrome. Error persists on Brave

#

error on firefox also

#

actually, chrome has the error on first render, but it clears it on rerender, and displays the page. Gonna turn off strict mode and recheck

#

seems to not be related to strict mode