-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
fix: handle hydration mismatches in await blocks #15708
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Conversation
🦋 Changeset detectedLatest commit: dfd0c11 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Oh wow, this is great! Thanks Rich! I appreciate it! I would have tried to tackle this myself, but I wasn't sure where to start. Turns out it wasn't in Kit where I reported the issue. Whoops! 😅 |
{#if true}<p>loading...</p>{/if} | ||
{:then b} | ||
<p>{b}</p> | ||
{/await} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is interesting. I was actually finding that the runtime was only having issue when I used a Component and an if (browser)
conditional in the await block, rather than "normal" HTML. I have no idea why, though, and that may have just been due to my surrounding structure.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the component is sufficient but not necessary — basically anything that adds 'structure' will confuse the hydration algorithm if there's a mismatch, and the if
block does the same thing. For test cases it's handy to keep things in a single component where possible, so I always try to whittle down
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yea, that makes total sense. I'm just surprised this recreated the issue. Thanks for the fix!
closes #15704
Before submitting the PR, please make sure you do the following
feat:
,fix:
,chore:
, ordocs:
.packages/svelte/src
, add a changeset (npx changeset
).Tests and linting
pnpm test
and lint the project withpnpm lint