-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Open
Labels
awaiting submitterneeds a reproduction, or clarificationneeds a reproduction, or clarification
Description
Describe the bug
🐛 Bug Report: $state(await ...)
causes component hydration failures and breaks parent contexts
Environment
- Svelte version:
https://pkg.pr.new/svelte@15844
(Svelte 5 pre-release) - SvelteKit version:
https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@b921e13
- Browser: [Your browser]
- OS: macOS
Description
Using await
inside $state()
causes hydration mismatches that break parent component contexts, leading to undefined CSS custom properties in floating UI components and broken component state across navigation.
Reproduction
Steps to Reproduce
- Create a layout with a provider context (e.g., sidebar provider with floating UI dropdowns)
- In a child route, use
$state(await someAsyncFunction())
- Navigate to the route - everything works initially
- Navigate away and back to the route using client-side navigation
- Parent context components (dropdowns, modals) stop working and show undefined CSS properties
Minimal Reproduction
Layout (+layout.svelte
):
<script>
import * as Sidebar from '$lib/components/ui/sidebar';
import AppSidebar from '$lib/components/app-sidebar.svelte';
</script>
<Sidebar.Provider>
<AppSidebar />
<main>
{@render children?.()}
</main>
</Sidebar.Provider>
Page with problematic code (+page.svelte
):
<script>
import { someAsyncFunction } from './data.js';
// ❌ This breaks hydration and parent contexts
let data = $state(await someAsyncFunction());
</script>
<h1>Page content</h1>
Expected CSS properties (working):
--bits-floating-transform-origin: center top;
--bits-floating-available-width: 1200px;
--bits-floating-available-height: 800px;
Actual CSS properties (after navigation):
--bits-floating-transform-origin: undefined undefined;
--bits-floating-available-width: undefinedpx;
--bits-floating-available-height: undefinedpx;
Expected Behavior
$state(await ...)
should work without causing hydration issues- Parent component contexts should remain stable across navigation
- CSS custom properties should maintain their calculated values
Actual Behavior
- After client-side navigation back to a route with
$state(await ...)
, parent contexts are broken - Floating UI positioning calculations return
undefined
values - Dropdowns, modals, and other positioned elements stop working
Workaround
Additional Context
- This appears to be related to SSR/hydration mismatches when combining reactive state with async operations
- The issue only manifests after client-side navigation, not on initial page load
- Using
$app/server
query functions seems to exacerbate the issue - The problem affects any parent context that relies on DOM measurements or positioning
Question
Is $state(await ...)
intended to be supported, or should async data loading always happen outside of reactive state initialization?
Logs
System Info
System:
OS: macOS 26.0
CPU: (12) arm64 Apple M4 Pro
Memory: 672.25 MB / 24.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
pnpm: 10.7.1 - ~/.bun/bin/pnpm
bun: 1.2.17 - ~/.bun/bin/bun
Browsers:
Safari: 26.0
npmPackages:
svelte: https://pkg.pr.new/svelte@15844 => 5.35.7
Severity
annoyance
Metadata
Metadata
Assignees
Labels
awaiting submitterneeds a reproduction, or clarificationneeds a reproduction, or clarification