Uncaught "ResizeObserver loop limit exceeded"

[hmartiins]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• "embla-carousel-react": "8.0.0-rc05",

Describe the bug

• I could not identify a step by step to reproduce this error, it happened sometimes in a production environment and I was able to capture this error through Datadog. This error started happening right when I migrated to version 8.0.0-rc05. My carousel didn't glitch or crash, but I got this error on my console. I'm using NextJS in my project.

Steps to reproduce

I just browsed my website and every time I entered the page I had this message

Expected behavior

• I would not want to get this error on my console.

Additional context

[davidjerleke]

@hmartiins please share more helpful information when creating a bug report. For example, this bug report is very clear and doesn’t leave you with many questions. At the time of writing I have no idea how to reproduce this.

• Have you browsed the web like StackOverflow to try to understand why or when this is happening?
• Is this only happening with NextJS or can you reproduce it without it?

This error started happening right when I migrated to version 8.0.0-rc05.

• Migrated from which version?

[VadymBezsmertnyi]

In the Safari 16.4 (18615.1.26.110.1) browser console, when using embla-carousel 8.0.0-rc02 to 8.0.0-rc05, the following error occurs: [Error] ResizeObserver loop completed with undelivered notifications.
However, when using embla-carousel 7.1.0, there are no errors.
I am using embla-carousel for a regular React application.
Additionally, if I add watchResize: false to the settings of useEmblaCarousel where embla-carousel is used, the error also disappears. Occasionally, it also appears on Chrome, but I haven't been able to track when and how it happens.

[davidjerleke]

Thanks for chiming in with additional details @VadymBezsmertnyi.

At this point I need to understand why this is happening and possible solutions. If you or anyone else has any useful information about this - please share.

[davidjerleke]

@hmartiins and/or @VadymBezsmertnyi when does this error appear in the console? As soon as the carousel mounts? If you have additional details on how to reproduce this, please share.

[hmartiins]

@davidjerleke what i noticed is when the carousel is mounted on the screen. I'll try to provide a codesandbox trying to simulate the error. The difficult thing is, I haven't encountered this error so far in a local environment, I'm just getting error messages and alerts about this in a production environment. From what I analyzed in my monitoring tool, this error occurred both in the android and in the IOS environment, so far I have not caught any reports of this error on the desktop. From the replays of the sessions in which this error occurs, the carousel does not break

[davidjerleke]

Thanks for the additional details @hmartiins 👍🏻. I’ll try to reproduce the error using BrowserStack then.

[hmartiins]

@davidjerleke So, I simulated it here on browserstack and was able to see the error on my console. It looks like it only occurs on real mobile devices.

[davidjerleke]

@hmartiins that’s very helpful. Thanks!

[davidjerleke]

@hmartiins that's so weird. I tried reproducing the error with BrowserStack but it did not throw any errors 😕. Additionally, your last error message is different from the first?

Would you mind creating a CodeSandbox with a carousel setup that triggers the error in BrowserStack and provide what iOS version you’re using?

There is an app view that should behave and work pretty much as any browser without the editing layers:

[VadymBezsmertnyi]

@davidjerleke With the addition of watchResize:false in the options, it doesn't throw an error, but it doesn't resize adaptively either. To change the size of the object, a reload is needed. I also tested it on 8.0.0-rc01, and it still throws an error. The error occurs whenever there is a change in the object where embla-carousel is located or responds.

[tobimori]

I can confirm this error but it doesn't seem to have caused any issues

[davidjerleke]

Allright I was finally able to reproduce it. One way to do it is to flip the iPhone in BrowserStack. The error is also thrown whenever the slide container is resized.

@hmartiins, @VadymBezsmertnyi or @tobimori I would very much appreciate if you could try to reproduce the error in this CodeSandbox with the bug fix I added.

Let me know if the error is gone or not.

Best,
David

[tobimori]

Works for me.

[davidjerleke]

@tobimori you mean no more ResizeObserver errors?

[tobimori]

@tobimori you mean no more ResizeObserver errors?

yeah

[davidjerleke]

@hmartiins, @VadymBezsmertnyi let me know if you're intending to test the fix too.

Best,
David

[VadymBezsmertnyi]

Thank you, @davidjerleke . I tried your code in CodeSandbox, and the error doesn't occur. I also tried version 8.0.0-rc06 in the project, and the error is still reproducible.

[davidjerleke]

@hmartiins, @VadymBezsmertnyi and @tobimori, a bugfix for this problem has been released with v8.0.0-rc07. Thanks for the help 👍.

[VadymBezsmertnyi]

Thank you, @davidjerleke. Everything is working perfectly and without any errors in the console. Thank you!