fix: flush effects scheduled during boundary's pending phase
#16738
Closing issues
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.0Severity
blocking an upgrade (to async svelte)
Describe the bug
In my App (in Dev Mode) i experienced that my attachement didn't trigger when the node was added to the DOM. Only after the component refreshed ( from HMR i guess ) the attachment triggered and in my case rendered a map.
I have a small repl where it doesn't work either but i don't know if async is activated on the Svelte Playground. Maybe this is the expected output and i'm doing something wrong in the repl.
Thanks for your help ♥️
Reproduction
https://svelte.dev/playground/8fe0eb6dbe8943b5ba057de9b6259ecb?version=latest
System Info
svelte: 5.38.1Severity
blocking all usage of svelte
Describe the bug
See #16682 (comment)
The issue here is that regular user effects (ones made specifically with $effect, not $effect.pre or render effects) are deferred until the component is mounted. However, since the code that indicates the component as being mounted, $.pop, runs synchronously (even in async components), the effects are never added to the array of deferred effects for their component (and might(?) be added to the parent component if it exists) if they're created after the first top-level await.
Reproduction
Logs
System Info
N/ASeverity
annoyance
Pull request
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
Info
![changeset-bot[bot]](https://avatars.githubusercontent.com/in/28616?v=4)
🦋 Changeset detected
Latest commit: e36137d
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| svelte | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)
pnpm add https://pkg.pr.new/svelte@16738
One question is whether or not $effects inside async components that are scheduled before any async work should flush, in other words if any effects of a component should flush before the component is settled. Because right now . I feel like this shouldn't happen.
I agree. I'm not immediately sure how to make it behave that way; when the user effects are scheduled on pop, they're included in the next batch.flush(), which doesn't defer effects to the next flush because as far as it's concerned nothing is pending (since async work inside a pending boundary doesn't affect the batch).
So we either need to avoid pushing effects (and pre/render effects? though I guess those aren't scheduled on creation so we probably can't, which is probably fine) to the flush array during traversal, if they're inside a pending boundary (but not block/async effects, obviously), or otherwise exclude them from the flush. But I'm not totally sure how best to make that happen.
I think the best move is to merge this to solve the immediate bug, then I'll open a PR with this failing test so that we don't lose it:
-- a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/Child.svelte
++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/Child.svelte
@@ -1,7 +1,11 @@
<script>
$effect(() => {
console.log('before');
});
await 1;
$effect(() => {
console.log('hello');
console.log('after');
});
</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js
index 81548a25e..0908b6a9f 100644
-- a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js
++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js
@@ -3,7 +3,8 @@ import { test } from '../../test';
export default test({
async test({ assert, logs }) {
assert.deepEqual(logs, []);
await tick();
assert.deepEqual(logs, ['hello']);
assert.deepEqual(logs, ['before', 'after']);
}
});fix: flush effects scheduled during boundary's pending phase
• Sep 10, 2025, 2:05 AM