Embla-carousel: RangeError: Maximum call stack size exceeded when inside React Router with render function

[slaymantis]

Great component.
I am having an issue when I place it inside a Route using react-router I am getting the error:
RangeError: Maximum call stack size exceeded
constrain
src/vanilla/components/limit.ts:47
44 | }
45 |
46 | function constrain(n: number): number {

47 | if (!reachedAny(n)) return n
| ^ 48 | return reachedMin(n) ? min : max
49 | }
50 |
View compiled
set
src/vanilla/components/counter.ts:31
28 | }
29 |
30 | function set(n: number): Counter {
31 | counter = withinLimit(n)
| ^ 32 | return self
33 | }
34 |

The route code looks like this
path="/facts/:id"
component={EmblaCarousel }
strict={true}
exact
/>

It works perfectly outside the Router BTW

[davidcetinkaya]

Hi @slaymantis,

Thanks for your question.
Please provide a CodeSandbox that demonstrates the issue. I’ve used Embla Carousel with React router many times without any issues, so I need that in order to see why you’re experiencing this issue.

Make sure you use the same version as you do in your sandbox. You may fork one of the example sandboxes here.

Kindly,
David

[slaymantis]

Thanks for the quick update!
I am actually using ionic/react-router rather than the pure rotuer (it extends from that)
I am doing some tests with the normal react router to see if the ionic version is causing the issue.

[davidcetinkaya]

I see. Let me know how it goes @slaymantis.

Best,
David

[davidcetinkaya]

Any updates on this @slaymantis?

Kindly,
David

[nikrowell]

@davidcetinkaya @slaymantis I saw this same error and found that it was only happening when the carousel was initially nested in an element with display: none. The error only appeared _after_ attempting to drag the carousel - initialization was fine (draggableClass was added to the embla target).

Hope that helps! I'll try to reproduce the issue in a Codesandbox soon.

[davidcetinkaya]

Thanks a bunch Nik (@nikrowell)!

I have a new major version with exciting features upcoming, so it would be nice investigate this and determine if it should be fixed before the release or not 🙂.

[nikrowell]

No problem - thanks for all your work on this project!

I've set up a quick example that reproduces the issue here. There is a wrapping div with display: none and a setTimeout that removes that style after 1 second. Happy to help troubleshoot if there's anything else I can do.

[davidcetinkaya]

Thank you for the CodeSandbox Nik (@nikrowell) 💪🏻.

So the question here is what Embla Carousel should do in these cases. The easy part is to check if any parent has display: none;. This approach seems to do the trick. But Embla Carousel obviously can’t pick up any container or slide sizes when any parent has display: none;.

Additionally, I merged the auto spacing detection feature today which adds a whole new level of convenience for users. This won’t work without element dimensions either.

Do you have any ideas on how we can solve this? Is it reasonable to let users trigger embla.reInit() after they’ve removed their display: none; shenanigans 🙂?

Best,
David

[nikrowell]

@davidcetinkaya makes sense on container sizes. I'd say the reInit approach is sufficient for this edge case - I don't think adding the bloat to traverse parent elements is worth it...
Thanks for checking things out!

[davidcetinkaya]

@nikrowell I've fixed the issue with Embla Carousel crashing when any parent has the style display: none;. You can try it out here. As we discussed, I think it's reasonable to let the user call the re-init method whenever they've removed the display: none; style on any of its parents.

Cheers,
David

[nikrowell]

Sweet - thanks! We could also consider a try / catch and console.warn as well to avoid confusion if this comes up again ("_Embla was unable to initialize due to..._")

[davidcetinkaya]

Thanks @nikrowell! Good idea 💪. I'm going to consider adding a warning as you suggested in a later version. I've released a fix for this bug with v4.2.0. Feel free to install it to try it out @slaymantis and/or @nikrowell.

Read more about the release details here.

Best,
David

[davidcetinkaya]

Closing this as resolved. Feel free to open this issue again if you run into trouble.