Skip to content

page.params undefined inside <svelte:boundary> when ancestor has top-level await #15395

@oxymc

Description

@oxymc

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 undefined

System Info

@sveltejs/kit: 2.50.1
svelte: 5.50.0
Node: 22.14.0

Severity

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().

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions