-
- Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
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
- Begin on
/
- 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 apending
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