[jarrednorrisdev]

Fixes #18930

The problem

With experimental.async, a component with a top-level await in its script and an await in its markup throws once the script's await settles if the component was destroyed in the meantime:

<!-- Child.svelte -->
<script>
	const x = await new Promise((r) => setTimeout(() => r(1), 500));
</script>

<p>{await Promise.resolve(x)}</p>

<!-- App.svelte -->
<script>
	import Child from './Child.svelte';

	let show = $state(true);
	setTimeout(() => (show = false), 100);
</script>

<svelte:boundary>
	{#if show}<Child />{/if}
	{#snippet pending()}loading{/snippet}
</svelte:boundary>

TypeError: Cannot read properties of null (reading 'async_deriveds')
    at async_derived (reactivity/deriveds.js)
    at run (reactivity/async.js)
    at reactivity/async.js  (flatten's blocker_promise.then callback)

It's more than an unhandled rejection. The boundary stays on its pending snippet forever, and without a boundary the root never renders. It happens with {await ...} and {#if await ...}, in dev and production builds, on 5.57.1 and main. Plain markup, $derived(await ...) in the script, and a markup await without a script await are unaffected.

The cause

In flatten, the template's await expressions wait for the script's blockers. When they settle, the callback calls restore() and then run(), which creates the async deriveds. restore() deliberately doesn't reactivate the batch for a destroyed effect, so async_derived runs with current_batch === null and throws at batch.async_deriveds. The throw happens before run attaches .finally(decrement_pending), so the pending count from increment_pending() is never released. That's why the boundary (or the root) stays pending.

The other two ways flatten resumes already handle a destroyed parent: finish returns early, and in both cases decrement_pending still runs in a .finally. The blocker callback was the one path without the check.

The fix

In the blocker callback, if parent was destroyed, call decrement_pending() and return without creating the deriveds. This matches what the fast path (blockers, no async expressions) already does through finish and .finally(decrement_pending).

Tests

runtime-runes/samples/async-destroyed-before-blockers-settle: a child with const value = await promise in its script and {await ...} in its markup is removed by an {#if} before the promise resolves, then the promise is resolved, and the test asserts that the boundary is no longer pending. Without the fix it fails in dom and hydrate with the TypeError above. With only an early return (no decrement_pending()), it fails on the stuck <p>loading...</p>.

Test plan

• pnpm vitest run packages/svelte/tests/runtime-runes/test.ts -t async-destroyed-before-blockers-settle: 2 passed (fails on main with the TypeError)
• pnpm test: 7,808 passed, 55 skipped, all 34 test files passing, including runtime-browser
• pnpm lint: passes (ESLint and Prettier)
• pnpm check: passes
• The repro above in a Vite 8 app with experimental.async, linked to the patched package, with vite dev and vite build + vite preview: no error, boundary leaves pending and later updates render. The variants with {#if await ...}, without a boundary, and the unaffected forms behave the same, and when the child isn't removed it still renders its value.

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:, or docs:.
• 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 test and lint the project with pnpm lint

🤖 Generated with Claude Code

[pkg-svelte-dev]

Install the latest version of svelte from 7cd9dc6:

pnpm add https://pkg.svelte.dev/svelte/c/7cd9dc60312cc43a96c1d5ec9b09c2d656cf4a3f

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/svelte/pr/18931

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7cd9dc6

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

[dummdidumm]

thank you!