`hydratable_missing_but_required` when using any Remote Functions

[kaechele]

Describe the bug

Since SvelteKit version 2.56.0 I am getting hydratable_missing_but_required any time I use a remote function on a page.

Reproduction

The most basic use of Remote Functions will trigger the issue: https://www.sveltelab.dev/pz5f795zd797tee?files=

Example Code:

src/lib/fetch.remote.ts:

import { query } from "$app/server";

export const fetchData = query(async () => {
  await new Promise((res) => setTimeout(res, 1000));
  return { cool: "beans" };
});

src/routes/+page.svelte:

<script lang="ts">
  import { fetchData } from "../lib/fetch.remote";
</script>

{#await fetchData()}
  Loading...
{:then data}
  <pre>Cool {data.cool}</pre>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

Logs

Error: hydratable_missing_but_required Expected to find a hydratable with key `d8hhsv/fetchData/` during hydration, but did not. https://svelte.dev/e/hydratable_missing_but_required

System Info

System:
    OS: Linux 6.19 Fedora Linux 44 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 7 PRO 7840U w/ Radeon 780M Graphics
    Memory: 34.37 GB / 58.54 GB
    Container: Yes
    Shell: 5.3.9 - /bin/bash
  Binaries:
    Node: 25.9.0 - /home/felix/.local/share/pnpm/node
    npm: 11.12.1 - /home/felix/.local/share/pnpm/npm
    pnpm: 10.33.0 - /home/felix/.local/share/pnpm/pnpm
    bun: 1.1.42 - /home/felix/.bun/bin/bun
  Browsers:
    Chrome: 146.0.7680.177
    Firefox: 149.0
    Firefox Developer Edition: 149.0
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.1 => 7.0.1 
    @sveltejs/kit: ^2.56.1 => 2.56.1 
    @sveltejs/vite-plugin-svelte: ^7.0.0 => 7.0.0 
    svelte: ^5.55.1 => 5.55.1 
    vite: ^8.0.3 => 8.0.3

Severity

serious, but I can work around it

Additional Information

Can be worked around by disabling SSR or downgrading to @sveltejs/kit to 2.55.0

[davekaro]

I had this issue as well and switching to using regular experimental await fixed it. For example:

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

  {@const data = await fetchData()}
  <pre>Cool {data.cool}</pre>
</svelte:boundary>

[filiabel]

I am pretty sure you never should use the "old" #await template syntax with remote functions, only the experimental await as noted above.

#await is never used in remote function docs: https://svelte.dev/docs/kit/remote-functions

[elliott-with-the-longest-name-on-github]

Yeah -- these experimental features are meant to be used with regular await and compilerOptions.experimental.async.

The reason you're seeing this is that #await does not server render your data -- it just skips it and renders Loading.... Then, when you get to the client during hydration, it's expecting to be able to read the remote function data from the cached data sent along with the SSR response, but it can't, because the server didn't render it. This would result in a client-side waterfall, where your total rendering time is SSR + hydration + network round trip for the remote function, rather than just SSR + hydration.

If you really must use #await, you could probably get around this by doing #await tick().then(() => fetchData()), because then your fetchData call would happen after hydration. But you'd still be running afoul of the waterfalling behavior mentioned above, so... you should probably just use regular await!