Skip to content

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

@dangodai

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions