You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This bug took me hours to understand and realize a minimum reproduction for, but it's currently blocking my company site from fully functioning.
This issue is seemingly related to #11057 (and maybe #13527/#13631), but it's not due to just "malformed HTML".
What happens is that hydration fails, with a JS error/crash, after the server-side rendered page has shown and client-side rendering has begun to take over, when combining 3 specific things:
A page has an {#await} block
The await block awaits data that is conditionally a promise or not (in loader: return { key: browser ? promiseVal : val };)
The {#await} block and it's {:then} block BOTH contain a component. (This one took a long time to realize)
This will all make much more sense in the reproduction section, but yea, this ends up as a pretty bad break, breaking the whole page, showing nothing but an empty background as the whole app's %sveltekit.body% section is wiped out, with an error in the browser's console.
The specific error is different depending on the contents of your await block, but for example the minimum reproduction shows: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'substring'). My production app, however, shows: Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Comment.
Due to the nature of the bug being due to hydration, though, it only occurs on fresh-page loads or browser refreshes of the page. If you navigate to a page that meets these repro requirements, and the app has already been initialized/hydrated, then no error occurs.
Removing the conditional promise loading (if (browser)) fixes the issue, but that's not a workable solution for my company's application, as we rely on the server-side rendering for SEO and noscript fallback, but need the client-side rendering for the app-like client-side instant navigation and loading UIs.
The text was updated successfully, but these errors were encountered:
Describe the bug
This bug took me hours to understand and realize a minimum reproduction for, but it's currently blocking my company site from fully functioning.
This issue is seemingly related to #11057 (and maybe #13527/#13631), but it's not due to just "malformed HTML".
What happens is that hydration fails, with a JS error/crash, after the server-side rendered page has shown and client-side rendering has begun to take over, when combining 3 specific things:
{#await}blockreturn { key: browser ? promiseVal : val };){#await}block and it's{:then}block BOTH contain a component. (This one took a long time to realize)This will all make much more sense in the reproduction section, but yea, this ends up as a pretty bad break, breaking the whole page, showing nothing but an empty background as the whole app's
%sveltekit.body%section is wiped out, with an error in the browser's console.The specific error is different depending on the contents of your await block, but for example the minimum reproduction shows:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'substring'). My production app, however, shows:Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Comment.Due to the nature of the bug being due to hydration, though, it only occurs on fresh-page loads or browser refreshes of the page. If you navigate to a page that meets these repro requirements, and the app has already been initialized/hydrated, then no error occurs.
Reproduction
For full context, here's a full minimum reproduction on StackBlitz:
https://stackblitz.com/edit/sveltekit-conditional-promise-rendering-bug?file=src%2Froutes%2F%2Bpage.svelte
Otherwise, the important bits are:
+page.js
+page.svelte
Logs
(Shortened. Expand for full log...)
System Info
System: OS: Linux 4.4 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish) CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 8.11 GB / 31.74 GB Container: Yes Shell: 5.1.16 - /usr/bin/bash Binaries: Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v22.14.0/bin/yarn npm: 11.2.0 - ~/.nvm/versions/node/v22.14.0/bin/npm pnpm: 9.15.4 - ~/.nvm/versions/node/v22.14.0/bin/pnpm npmPackages: @sveltejs/adapter-auto: ^6.0.0 => 6.0.0 @sveltejs/adapter-node: ^5.2.12 => 5.2.12 @sveltejs/kit: ^2.20.3 => 2.20.3 @sveltejs/vite-plugin-svelte: ^5.0.3 => 5.0.3 svelte: ^5.25.6 => 5.25.6 vite: ^6.2.4 => 6.2.4Severity
serious, but I can work around it
Additional Information
Removing the conditional promise loading (
if (browser)) fixes the issue, but that's not a workable solution for my company's application, as we rely on the server-side rendering for SEO andnoscriptfallback, but need the client-side rendering for the app-like client-side instant navigation and loading UIs.The text was updated successfully, but these errors were encountered: