-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Open
Open
Copy link
Labels
Description
Describe the bug
page.params from $app/state is undefined inside <svelte:boundary> during hydration when an ancestor component has top-level await, even though it's correctly defined outside the boundary in the same component.
Reproduction
Layout with Sidebar component:
<!-- src/routes/[tenant]/+layout.svelte -->
<script>
import Sidebar from '$lib/sidebar.svelte';
</script>
<Sidebar />
<main>{@render children()}</main>Sidebar with top-level await (no boundary):
<!-- src/lib/sidebar.svelte -->
<script>
import { queryMe } from './query-me.remote';
// This causes suspension during hydration
let me = await queryMe();
</script>
<nav>User: {me.name}</nav>Feed component using page.params:
<!-- src/lib/feed.svelte (used in a route page) -->
<script>
import { page } from '$app/state';
import { queryChanges } from './query-changes.remote';
</script>
<!-- ✅ This works -->
{console.log('OUTSIDE', page.params.tenant)} // "test-tenant"
<svelte:boundary>
<!-- ❌ This is undefined -->
{console.log('INSIDE', page.params.tenant)} // undefined
{#each await queryChanges({ tenant: page.params.tenant }) as change}
<div>{change.text}</div>
{/each}
{#snippet failed()}
Error loading
{/snippet}
</svelte:boundary>Logs
Console output:
OUTSIDE test-tenant
INSIDE undefinedSystem Info
@sveltejs/kit: 2.50.1
svelte: 5.50.0
Node: 22.14.0Severity
serious, but I can work around it
Additional Information
breaks common pattern of top-level await + remote functions using route params. Workaround: avoid top-level await OR get params from $props().
Reactions are currently unavailable