search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.39k stars 166 forks source link

Destroying (eg on switching page) with autoplay plugin causes error: Cannot read properties of undefined (reading 'stopOnInteraction') #643

Closed tombryden closed 6 months ago

tombryden commented 7 months ago

Bug is related to

Embla Carousel version

Describe the bug

Great work with this project!

Switching page (or destroying embla api) causes Cannot read properties of undefined (reading 'stopOnInteraction') when there are only a few elements in a carousel with the autoplay plugin. I am not sure what number of elements cause this problem - in our prod site, we are getting the error when displaying 4 slides while showing 4 at a time (flex: 0 0 25%). The example CodeSandbox shows this working with displaying 2 slides, and only having 2 slides in total, however failing with one slide with the same error.

In most cases our prod app carousels contain 5+ slides so no issues, however there are instances where 4 or less slides are being displayed in dynamically rendered carousels, causing this error.

CodeSandbox

https://codesandbox.io/p/github/tombryden/embla-autoplay-bug/main

Steps to reproduce

  1. Open CodeSandbox link above
  2. Click 'Another Page' hyperlink
  3. Observe Cannot read properties of undefined (reading 'stopOnInteraction') error.
  4. Uncomment slide 2
  5. Rerun above steps and observe no error

Expected behavior

Behaviour of the reproduction should be consistent between the two scenarios

davidjerleke commented 7 months ago

Thanks @tombryden for a complete bug report. I'll look into it when I get the chance.

Best, David

ciza99 commented 6 months ago

Are there any updates on this? or is this not happening in previous versions so I could temporarily downgrade?

davidjerleke commented 6 months ago

@ciza99 I haven’t had the time to look into it. You can try downgrading and see if that solves the problem but I don’t know that either at the time of writing.

ciza99 commented 6 months ago

@davidjerleke I can confirm that I have no issues on version v8.0.0-rc14

davidjerleke commented 6 months ago

Thanks @ciza99 for confirming!

davidjerleke commented 6 months ago

Hi @tombryden and @ciza99,

When I include embla-carousel-autoplay locally in your CodeSandbox it seems to work as expected. Try setting the NextJS option SWCminify: false so it uses terser instead, and let me know if the problem persists?

Best, David

tombryden commented 6 months ago

Hi @davidjerleke. Just tested including embla-carousel-autoplay locally which works as expected. Setting swcMinify: false still fails in NextJS 14.0.4 using the packaged version of autoplay. Thanks

davidjerleke commented 6 months ago

@tombryden I found the culprit. A bug fix is on its way...

davidjerleke commented 6 months ago

@tombryden a bug fix for this was just released in v8.0.0-rc17.

tombryden commented 6 months ago

@davidjerleke Many thanks!