Top level await prevents onMount, bind:this from running
#16582
Development PR
Alternative to #16721, partial alternative to #16709. Closes #16691, closes #16627, closes #16582 and #16651 as well.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
When using a top level await inside of a <script> tag both onMount and elements with bind:this will not run, despite all promises in the script tag resolving. I suspect onMount and bind:this run at roughly the same time internally and are being blocked by a single issue.
Reproduction
Reproduction of both issues can be found here:
https://www.sveltelab.dev/695vn9wj60ay38q?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte
Observe that
- The button bound to
myButtonis undefined. This is shown both in the markup and by clicking the button to log the value ofmyButton onMounthas not run. This is shown both in the markup and by the absence of the log printed inside ofonMount- Removing the
await ...line causes both issues to go away
Oddly, when navigating to the second page /page2 (which you can navigate to using the buttons) the onMount function from the first page will finally run. Navigating back to / will result in onMount and bind:this functioning seemingly correctly.
Logs
System Info
System:
OS: Linux 6.15 Arch Linux
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Memory: 6.02 GB / 15.54 GB
Container: Yes
Shell: 5.3.3 - /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
pnpm: 10.13.1 - ~/.local/share/pnpm/pnpm
Browsers:
Chromium: 139.0.7258.66
npmPackages:
svelte: ^5.38.0 => 5.38.0
Severity
blocking an upgrade (to async svelte)
Info
Just a guess, since I don't know how Svelte internals work, but I think this may be related to #16571 as effect.pending() is indeed stuck at 1 while this issue is happening.
Had the same issue when trying to use the experimental APIs with apache echarts.
When using an attachment, the element passed into the attachment function is also undefined if the component consuming the attachment has any of its parents contain a top level await
Something changed here, possibly from #16571 being completed, but there still seems to be a lingering problem.
If you update my reproduction to svelte@5.38.6 you will see the same bug. However if you add {$effect.pending()} to the template then the bug magically disappears. This wasn't the case in the Svelte version when I originally posted this.
Any workaround or version with onMount working?