`hydration_mismatch`

[hyunbinseo]

Describe the bug

I honestly don't know what to title this. Please edit the title as-needed.

<script lang="ts">
  import { getIds } from './data.remote';
</script>

<!-- hydration_mismatch -->
<ol>
  {#each await getIds() as id (id)}
    <li>{id}</li>
  {/each}
</ol>

<!-- no warning -->
<ol>
  <svelte:boundary>
    {#each await getIds() as id (id)}
      <li>{id}</li>
    {/each}
  </svelte:boundary>
</ol>

<!-- no warning -->
{#each await getIds() as id (id)}
  <li>{id}</li>
{/each}

Reproduction

https://github.com/hyunbinseo/svelte-16905

Logs

System Info

System:
  OS: Windows 11 10.0.26100
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 6.07 GB / 31.48 GB
Binaries:
  Node: 24.9.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\10736_1759812622707\node.EXE
  npm: 11.6.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\10736_1759812622707\npm.CMD
  pnpm: 10.18.1 - C:\Users\hyunb\AppData\Local\fnm_multishells\10736_1759812622707\pnpm.CMD
  Deno: 2.4.0 - C:\Users\hyunb\.deno\bin\deno.EXE
Browsers:
  Chrome: 140.0.7339.210
  Edge: Chromium (140.0.3485.54)
  Firefox: 143.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe

Severity

blocking an upgrade

[Rich-Harris]

Came here to report the same issue. It happens when an {#each ...} block is the sole child of an element:

<div>
	{#each await ['one', 'two', 'three'] as x}
		<p>{x}</p>
	{/each}
</div>

You can work around it by putting an empty <span> or something next to the each block