Describe the bug

Since v5.43.0, some items in an {#each} block are duplicating in a specific scenario related to the experimental async syntax. All awaited items except the first appear a second time (eg. item 1, item 2, item 3, item 2, item 3). The items are not duplicated in the SSR ouput (in a SvelteKit app), the duplicated items are only added on client load, it appears.

Note: This only occurs in a production build, not in development. No errors/warnings are logged. The issue does not occur in v5.42.3 or below.

Reproduction

The following is a minimal reproduction of an issue I am encountering in a real app. The issue does not occur if const another = {...} (L5) is moved before const messages = await ... (L4), if another is not passed to the component, or if the <p>{message}</p> is defined directly in the {#each} block, instead of in a seperate component.

Playground: https://svelte.dev/playground/hello-world?version=5.43.15#H4sIAAAAAAAACo1QQWrDMBD8yrItOAET0_ZmbEPppcfeoxxUe5MIZElot0mL0d-LaRw3IYWeNBqtZmdmQKd7whJfyVoPRx9tBwvqjFC3xBy3xhJjuR5QvsI4NxKYT7-eQ1jxgayM3LtmusW33gk5YSyx4jaaIGC129UKhRU2ygGYPvgo8OL74B05gW30PWSr4syc5DLlxvnWOxboiVnviKEGfdRG4C363jCtIrG3B1qsFRqhHh4U5nDCj7_wk8LNctbTzsueItQwgBBLCdl4ZJCUq4of681oYLgj3e7n_ZonnEa1as4xTDwMJ_UERaPcUIwKCXMU-hQsJX5Qyv9o-bqEy65vvP6jcUsCw-QaUjlfSmCJxu3yqY-JgAQ13IfoAy-WV41UoTlHrYrQXAbb5Cja2KNxHZZbbZnSNwCgDOl5AgAA

(you need to use it with hydration locally in the playground to reproduce; for an in-browser reproduction see https://stackblitz.com/edit/sveltejs-kit-template-default-es5urw13?file=src%2Froutes%2F%2Bpage.svelte)

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: 5.43.0 => 5.43.0

Severity

blocking an upgrade

Describe the bug

TL;DR: Using experimental async ($derived(await ...)) in a component that also uses {@attach} with a function from bind:this breaks SSR hydration. In development, this causes a warning. In production build with nested components, the application crashes completely and the page fails to render.

The issue appears to be that the async boundary interacts incorrectly with the {@attach} directive during hydration. When the component contains $derived(await ...), the hydration process seems to lose track of the attachment state, causing a mismatch between server-rendered HTML and client-side component tree. With nested {@render children?.()} calls, this mismatch escalates into a fatal TypeError that prevents the component from mounting.

Conditions to reproduce

All of the following must be present:

1. Experimental async enabled in svelte.config.js: compilerOptions: { experimental: { async: true } }

2. $derived(await ...) in the component (even if the value is not used in markup)

3. {@attach ref?.action} where:

• ref is obtained via bind:this from another component
• The function is exported from that component

4. SSR enabled (default in SvelteKit)

5. Nested components with {@render children?.()} — for TypeError to occur, at least two levels of nesting required

Behavior

Environment	Single nesting	Double nesting
Dev	hydration_mismatch warning	hydration_mismatch warning
Production	hydration_mismatch warning	Application crashes, component fails to render

Notes

• Removing $derived(await ...) — no error
• Removing {@attach} — no error
• Removing bind:this reference (using local function instead) — no error
• Disabling SSR — no error

Expected

No hydration mismatch when the async value is not used in the SSR-rendered markup, and no TypeError regardless of component nesting depth.

Reproduction

svelte.config.js

export default {
  compilerOptions: {
    experimental: { async: true }
  }
}

index.svelte

<script>
  import Outer from './Outer.svelte'
  import Inner from './Inner.svelte'
  import Trigger from './Trigger.svelte'

  const data = $derived(await Promise.resolve(['a', 'b']))
  let trigger = $state()
</script>

<Outer>
  <Inner {@attach trigger?.action}>
    foo
  </Inner>
</Outer>

<Trigger bind:this={trigger} />

Outer.svelte

<script>
  let { children } = $props()
</script>
<div>{@render children?.()}</div>

Inner.svelte

<script>
  let { children } = $props()
</script>
<div>{@render children?.()}</div>

Trigger.svelte

<script lang='ts'>
  import type { Attachment } from 'svelte/attachments'

  export function action(): Attachment<HTMLElement> {
    return ()=>{}
  }
</script>

Logs

https://svelte.dev/e/hydration_mismatch
TypeError: Cannot read properties of undefined (reading 'f')

System Info

System:
    OS: macOS 26.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 147.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.13.0 - /Users/exentrich/.nvm/versions/node/v24.13.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 11.6.2 - /Users/exentrich/.nvm/versions/node/v24.13.0/bin/npm
    bun: 1.3.7 - /Users/exentrich/.bun/bin/bun
    Deno: 2.0.4 - /Users/exentrich/.deno/bin/deno
  Browsers:
    Brave Browser: 141.1.83.120
    Chrome: 144.0.7559.110
    Chrome Canary: 146.0.7666.1
    Edge: 142.0.3595.80
    Firefox: 146.0.1
    Safari: 26.2
    Safari Technology Preview: 26.0
  npmPackages:
    svelte: ^5.48.2 => 5.49.1

Severity

blocking an upgrade