-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@html directive hydration bug #6633
Comments
@benmccann You moved this issue from SvelteKit to Svelte, but it seems to only occur in SvelteKit — the reproduction works fine in the Svelte sandbox https://svelte.dev/repl/cc160f42f9bb4d06a2a36a3314abfa9c?version=3.42.1 I encountered this issue while migrating an app from Sapper to SvelteKit, so the issue seems specific to kit. |
The REPL isn't equivalent. SvelteKit renders it on the server and then hydrates it on the client, which the REPL isn't doing. This sounds like it's a hydration bug. @hbirler FYI in case you're interested |
I tried multiple versions of Svelte with my reproduction and indeed, it seems that this bug is a recent regression in Svelte/core :
I don't find any obvious change that has caused this issue from the changelog. I guess we could add a test and git bisect between 3.38 and 3.39 to find the culprit commit. |
Hi! Any news on this? Glad to help! Thanks in advance. |
After each #if it claims one white space during hydration because of the lines breaks. Workaround here is simply removing the lines break. This seemed to work: {#if false} hello{/if}
{#if false} hello{/if}{@html example} |
This bug is fixed with the latest beta of Svelte v4 I think this was fixed in #7426. |
Describe the bug
This bug is difficult to describe in prose, I recommend looking at the reproduction first.
When a
{@html myContent}
directive is used after two conditions{#if}
, the content isn't rendered on the client-side. The content is still rendered on the server causing the content to blink.As showed in the reproduction, the issue only arise when the
myContent
isn't wrapped in html tags, which is normally supported in svelte.Reproduction
https://github.com/mquandalle/repro-sveltekit-html-directive-bug/blob/master/src/routes/index.svelte
Logs
No response
System Info
Severity
annoyance
Additional Information
No response
The text was updated successfully, but these errors were encountered: