Svelte 5 + <svelte:head> hydration error

[amit13k]

Astro Info

Astro                    v4.12.2
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

After the Astro + Svelte 5 snippet issue was fixed recently (https://github.com/withastro/astro/issues/11149), I tried using mode-watcher in an astro project. I am getting this hydration error, TypeError: Cannot read properties of null (reading 'nodeType'). It seems to be related to the use of <svelte:head>.

MRE using mode-watcher

MRE using svelte component with just <svelte:head>

Some discussion here, https://github.com/sveltejs/svelte/pull/12409#discussion_r1674458469.

Is this a bug(svelte or astro?) or just a limitation when using svelte5 with astro ?

What's the expected result?

No hydration errors

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-auhvgj-unik9c?file=src%2Fpages%2Findex.astro,package.json,src%2Fpages%2F_a.svelte

Participation

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

[bluwy]

I think this is a limitation with head rendering in Astro from UI frameworks currently. We can't append the head from the Svelte component because when streaming HTML, the head may (and likely already had) been streamed, so we can't backtrack and add the head.

IIRC I don't think there's hydration errors in Svelte 4 and perhaps Svelte 5 could do the same in a fail-safe way. The issue is that in Svelte 5's head hydration here, it did not account when nextSibling ends and becomes null due to the hydration marker not existing at all.

I'd suggest reporting to https://github.com/sveltejs/svelte to see if it's something they're willing to fix (or deem a bug), but otherwise I think it's something Astro couldn't support for the time being (in SSR).