Maximum call stack size exceeded on large page

[hrmcdonald]

What version of astro are you using?

2.5.5

Are you using an SSR adapter? If so, which one?

Lit

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

On one of our largest pages with a lot of instances of custom elements, we get the following error:

Uncaught RangeError: Maximum call stack size exceeded.
    at hydrate ({{page-name-here}})
    at hydrate ({{page-name-here}})
    at hydrate ({{page-name-here}})
    at hydrate ({{page-name-here}})

This seems to happen in the logic for the astro-island web component, specifically this hydrate method:

Nothing seems to be wrong with the page, but I think that might be because it's loading in and registering custom elements before it exceeds the call stack. Could something just be looping through too many instances of the same elements used across the page?

Link to Minimal Reproducible Example

I don't know how to recreate this. I tried.

Participation

• I am willing to submit a pull request for this issue.

[proyb6]

Tried to create with Empty Project then fork/share?
https://astro.new/latest/

[bluwy]

I don't see how Astro's hydrate code could be called recursively. A repro would help a ton, but if it's not possible, maybe you can show the full stacktrace instead, or use something like https://replay.io

[hrmcdonald]

Thanks, I should have some time in the next week or two to dive deeper into trying to recreate this. I'll circle back and post more info then.

[hrmcdonald]

I was able to track this down to a single client:load/client:idle (it would happen with either) directive on web component that was rendered quite a bit within a few loops. Since this is a web component it only ever needs to be "loaded" once to register the element with the page. Hoisting the load directive outside of the loops to single hidden instance of the component is enough to register the component without calling the client directive load() hundreds of times.

Is there a better pattern for dealing with this?

[bluwy]

I think I know what's going on, this hydrate code here could be called many times on startup if many islands are hydrated at once.

astro/packages/astro/src/runtime/server/astro-island.ts

Line 98 in 64b2b65

hydrate = () => {

For each island that finish hydrating, it removes its own astro:hydrate listener, but also trigger a global astro:hydrate event:

astro/packages/astro/src/runtime/server/astro-island.ts

Lines 128 to 129 in 64b2b65

	window.removeEventListener('astro:hydrate', this.hydrate);
	window.dispatchEvent(new CustomEvent('astro:hydrate'));

So for the other islands that are still hydrating but haven't reached that code yet (to remove the listener), the global event triggers their hydration again.

I actually made a refactor that should fix that while working on #7197 (that PR doesn't include the fix, but I was investigating hydration code then). When that PR gets merged, I can try a fix and cut a preview release to test out.

[bluwy]

@hrmcdonald I've made a preview release at #7370, which you can try with npm install astro@next--simple-nested-hydration. Appreciate if you can test it out!

[hrmcdonald]

Awesome thanks, I'll find time to test this out soon.

[bluwy]

@hrmcdonald checking again if you're able to test this? Hoping to not let the PR hanging too long.

[hrmcdonald]

Sorry, we had a big release last week and I forgot to come back to this. I'll test this out today.

[hrmcdonald]

Confirmed @bluwy!

I re-configured a page to create the call-stack exceeded error from this issue and then tested the build again with astro@next--simple-nested-hydration and was no longer getting those errors.

[bluwy]

Awesome! Thanks for testing it. Will get that PR merged.