Async Svelte breaking block effects in template (in SvelteKit?)

[dangodai]

Edit: I have some further findings in a comment below, please see them for a better picture of the issue

Describe the bug

Hi, I'm not sure sure if this is a Svelte or SvelteKit issue because I'm not really sure what's happening. I can move the issue if needed. However as far as I can tell async svelte is not expected to break SvelteKit applications unless using the features specifically called out as breaking (which I'm not).

When enabling the async svelte feature flag I am having an issue where the page component is trying to access state (the page data) after the state has been removed. This only seems to happen to state this is used inside of an {#each} block as far as I can tell.

When navigating between pages that reuse the same page component (e.g. changing a slug) there is no error.

The error received in the browser is (see reproduction below):

Uncaught TypeError: $$props.data.pikachu is undefined

  in <unknown>
  in +layout.svelte
  in root.svelte
    _page +page.svelte:18
    each_array each.js:151
    update_reaction runtime.js:300
    execute_derived deriveds.js:308
    update_derived deriveds.js:331
    is_dirty runtime.js:219
    traverse_effect_tree_fn batch.js:251
    process_fn batch.js:177
    flush_effects batch.js:338
    flush batch.js:307
    ensure batch.js:415
    ensure batch.js:409
    internal_set sources.js:176
    set sources.js:155
    set legacy-client.js:109
    <anonymous> legacy-client.js:147
    $set legacy-client.js:157
    navigate client.js:1595
    _start_router client.js:2383
    _start_router client.js:2274
    start client.js:339
    async* (index):195
    promise callback* (index):194
+page.svelte:18:30

Reproduction

The repo contains the smallest reproduction I could find: https://github.com/dangodai/async-sveltekit-bug

It is a basic SvelteKit application and can be run with npm install and npm run dev. To trigger the error

1. Begin on /
2. Click on the "Page 2" link to navigate to /page2 and observe the error in the console

Some notes:

• Beginning on /page2 and navigating to / does not trigger the error
• If you uncomment the #each block from page2, navigating away from either page will trigger the error
• Disabling async svelte causes everything to work as expected
• Adding a <svelte:boundary> with a pending snippet does not fix the error (and I don't think is required since we aren't doing any async work so I didn't include it)

Logs

System Info

Not included below: I am testing in `Mozilla Firefox 139.0.1`

  System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 4.52 GB / 15.54 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
  Browsers:
    Chromium: 137.0.7151.68
  npmPackages:
    svelte: ^5.36.2 => 5.36.2

Severity

blocking an upgrade

[dangodai]

Just a couple of notes:

1. I've been unable to reproduce this in pure Svelte (no Kit), but I'm also clueless to the internals of how kit works in order to accurately recreate what might be happening
2. Using SvelteKit from the remote functions PR (Remote Functions kit#13986) which I would expect to work well with async svelte still causes the error

I'd be surprised if I'm not missing something or doing something wrong though since I don't see others bringing up this issue, because from my perspective this would cause 99% of SvelteKit apps to break (anything using load functions and #each blocks).

[retrotheft]

It looks like what's happening is that with the experimental async features on, when you switch routes the template continues executing a moment longer, even after the data has changed in the script tag. I added some logging and compared with and without async, and then added a svelte:boundary to catch the error.

without async:

with async:

with svelte:boundary

---

A few approaches:

• using svelte:boundary will help, as seen, and provides some extra features
• optional chaining or an #if block will protect against it, without the nice error catching the boundary gives you
• you might also consider using the same key for each page, and sending the pokemon name as a value

That's about all I can figure out :)

[dangodai]

I have simplified my reproduction quite a bit and I have some further findings (https://github.com/dangodai/async-sveltekit-bug)

For some reason when SvelteKit navigates each, if, and key effects (at a minimum, there may be other cases too) re-run on the page being destroyed, but after the page data has been switched to the incoming page data (or perhaps as a result of).

The contents of the block doesn't really matter, but rather the value that the block is reading/tracking (sorry, I'm not sure of the right terminology here, but the value used inside of the curly braces).

This means any nested page data will cause an error unless the incoming page data matches the same shape, but only inside of certain block effects (in other words, you will end up accessing a property of undefined).

Notably:

• Accessing a nested property in a basic text expression is fine (e.g. {foo.bar.baz}
• Accessing a nested property in an {#await} block works, and using the promise result works even when nesting one of the otherwise bad blocks

I still haven't been able to reproduce this in Svelte without Kit.

[PatrickG]

Minimal reproduction

[AndreasHald]

Are there any known workarounds for this?

[fehnomenal]

I got lucky with optional access everywhere (?.). The types do not enforce it so it is easy to overlook...

[dangodai]

Are there any known workarounds for this?

An alternative to optional chaining everything is to wrap the contents of any affected components/pages in a <svelte:boundary>

[LetrixZ]

Are there any known workarounds for this?

An alternative to optional chaining everything is to wrap the contents of any affected components/pages in a <svelte:boundary>

This didn't work for me, even wrapping the children in the layout.

[dangodai]

Are there any known workarounds for this?

An alternative to optional chaining everything is to wrap the contents of any affected components/pages in a <svelte:boundary>

This didn't work for me, even wrapping the children in the layout.

IIRC it worked for me by putting the boundary inside of the crashing component. In the case of SvelteKit, that means inside of each +page.svelte. It's a bit cumbersome to add to every page but probably less so than optional chaining.

I imagine if you have a LayoutLoad function passing props to a layout, you might need to wrap the +layout.svelte too but I haven't tested that case.