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

[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

[Rich-Harris]

This isn't a minimal reproduction. I don't have access to whatever's in your $lib/components. Please reproduce the issue in the playground if you can, because there's nothing we can realistically do to diagnose the issue without a proper repro

[saent-x]

It's a bit difficult to pinpoint the issue, but mainly reactivity in the page is lost. I've made a video below hightlighting the issue...

Screen.Recording.2025-07-20.at.3.23.55.am.mov

Here is the code for the form component;

<script lang="ts">
  import { createAgents } from '../../routes/dashboard/agents/agents.remote';
  import AvatarGen from './avatar-gen.svelte';
  import { Input } from '$lib/components/ui/input';
  import { Label } from '$lib/components/ui/label';
  import Textarea from './ui/textarea/textarea.svelte';
  import { Button } from './ui/button';
  import { toast } from 'svelte-sonner';

  type Props = {
    onCancel: () => void;
  };

  let { onCancel }: Props = $props();
  let name = $state<string>('');
  let creating = $state<boolean>(false);

  let formEnhance = async ({ submit }: { submit: any }) => {
    try {
      creating = true;
      await submit();
      console.log('submitted...');
      toast.success(`Agent created successfully!`);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'An error occurred');
    } finally {
      creating = false;
    }
  };
</script>

<form class="space-y-7" {...createAgents.enhance(formEnhance)}>
  <AvatarGen class="size-16 border" variant="bot" bind:name />
  <input type="hidden" name="user_id" value="" />

  <div class="flex w-full flex-col gap-1.5">
    <Label for="name">Name</Label>
    <Input
      bind:value={name}
      type="name"
      id="name"
      name="name"
      placeholder="Software Engineer Tutor, C# Interview bot"
    />
  </div>
  <div class="flex w-full flex-col gap-1.5">
    <Label for="instructions">Instructions</Label>
    <Textarea
      id="instructions"
      name="instructions"
      placeholder="you're a helpful agent very knowledgeable in software development and its latest technological trends."
    />
  </div>

  <div class="flex justify-between">
    <Button
      variant="ghost"
      type="button"
      onclick={(e) => {
        // e.preventDefault();
        onCancel();
      }}>Cancel</Button
    >

    <Button disabled={creating} style={creating ? 'bg-gray-800' : ''} type="submit">Create</Button>
  </div>
</form>

<svelte:boundary>
  {#await createAgents.result then result}
    {#if result}
      <p>{result.name}</p>
      <p>{result.instructions}</p>
    {/if}
  {/await}

  {#snippet failed()}
    <p>failed</p>
  {/snippet}

  {#snippet pending()}
    <p>pending</p>
  {/snippet}
</svelte:boundary>

Here is the code for the remote function atm;

import { query, form, getRequestEvent } from '$app/server';
import { api } from '$lib/server/api/agents';
import { authGuard } from '$lib/server/api/utils';
import { z } from 'zod/v4';

export const getAgent = query(z.string(), async (id) => {
  return await api.getOne(id);
});

export const listAgents = query(async () => {
  return api.listAll();
});

export const createAgents = form(async (data: FormData) => {
  let reqEvt = getRequestEvent();

  // if this doesn't validate it'll just throw an Error
  await authGuard(reqEvt.request.headers);

  let name = data.get('name') as string;
  let instructions = data.get('instructions') as string;

  return {
    name,
    instructions
  };
});

Lemme know if you need anymore information... also here are the version of packages used;

"@sveltejs/kit": "https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@b921e13",
"svelte": "https://pkg.pr.new/svelte@15844",