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

[tombryden]

Bug is related to

• embla-carousel-react
• embla-carousel-autoplay

Embla Carousel version

• v8.0.0-rc15

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]

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

Best,
David

[ciza99]

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

[davidjerleke]

@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]

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

[davidjerleke]

Thanks @ciza99 for confirming!

[davidjerleke]

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]

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]

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

[davidjerleke]

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

[tombryden]

@davidjerleke Many thanks!