Skip to content

🐛 Bug Report: $state(await ...) causes component hydration failures and breaks parent contexts #16383

@saent-x

Description

@saent-x

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

  1. Create a layout with a provider context (e.g., sidebar provider with floating UI dropdowns)
  2. In a child route, use $state(await someAsyncFunction())
  3. Navigate to the route - everything works initially
  4. Navigate away and back to the route using client-side navigation
  5. 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

No one assigned

    Labels

    awaiting submitterneeds a reproduction, or clarification

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions