hydration mismatch with async and nested if
#17618
Development PRs
The problem comes down to $.async wrapping a component and being the sole child of a block (if, snippet prop, etc). Normally, said component would either have no content at all, and therefore nothing to advance with respect to hydration nodes, or call $.append() at the end which advances it past the closing hydration anchor. But when $.async wraps it, there's now an additional comment pair surrounding them, and it's not advancing past those - so the next hydration walk assumes its now past the closing marker when it isn't. For this we need to add $.next() after $.async()
Also fixes #17618
The problem here is very related (hence amended to the PR) where with fast-path, it is unknown to us within $.async whether or not the marker will advance to the closing marker of $.async - with a component as its child it will (because of the $.append inside it), with an if block for example it will not (because the if block logic will stop at its closing marker). We cannot know which case it is hence we advance to the end marker before calling the inner function in $.async, to then definitly set $.async's closing marker.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Alternative to the latter part of #17611 — see #17611 (comment)
Fixes #17618
In the fast-path, it is unknown to us within $.async whether or not the marker will advance to the closing marker of $.async - with a component as its child it will (because of the $.append inside it), with an if block for example it will not (because the if block logic will stop at its closing marker). We cannot know which case it is hence we advance to the end marker before calling the inner function in $.async, to then definitly set $.async's closing marker.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
Using a nested {#if}{/if} on an async component while having the experimental async feature enabled, breaks hydration when using SSR.
It seems like it fails to find the hydration markers, using whatever else it finds instead.
Reproduction
https://github.com/santiagocezar/hydration-troubles-repro
It seems to be a regression in 5.49.2. Plus, I checked if PR #17611 fixed it by chance but had no luck there, sadly.
There's three variants!
- The sync one is the boring one that just works
- The async-only one causes a hydration mismatch (but the error log doesn't give much details as to why)
- The async+onclick one causes a completely different error! (it grabs a text node for some reason)
Logs
# on the Async-only variation
[svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server
https://svelte.dev/e/hydration_mismatch
Uncaught (in promise) Object { }
# on the Async+onclick one
Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a TextSystem Info
System:
OS: Linux 6.18 cpe:/o:nixos:nixos:26.05 26.05 (Yarara)
CPU: (16) x64 AMD Ryzen 7 7730U with Radeon Graphics
Memory: 4.65 GB / 14.98 GB
Container: Yes
Shell: 0.109.1 - /run/current-system/sw/bin/nu
Binaries:
Node: 24.13.0 - /run/current-system/sw/bin/node
npm: 11.6.2 - /run/current-system/sw/bin/npm
pnpm: 10.28.0 - /run/current-system/sw/bin/pnpm
bun: 1.3.6 - /run/current-system/sw/bin/bun
Browsers:
Firefox: 147.0.1
Firefox Developer Edition: 147.0.1
npmPackages:
svelte: 5.49.2 => 5.49.2Severity
blocking an upgrade
Info
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)