Svelte Custom Element `disconnectedCallback` throws errors when inside an `async` block

[ComradeCow]

Describe the bug

I have a Svelte Custom Element (using <svelte:options customElement="..."/>) that I'm projecting into another element. That element has a default slot that is shown after a promise is resolved (using an await block).

Every time that custom element is mounted into an async block, an error message is logged to the console saying Cannot read properties of undefined (reading '$destroy').

This behavior does not happen when the custom element is mounted in a regular if block (even when the condition is false.

Reproduction

See reproduction here: https://stackblitz.com/edit/vitejs-vite-8f6txm?file=src%2FApp.svelte

When the App component is first rendered, a Cannot read properties of undefined (reading '$destroy') error is caught and logged.

Click the "Toggle async host" once to hide it, and once again to show. The same error will be logged.

Click the 'Toggle sync host' button twice. Notice no errors are logged.

---

I set up a simpler reproduction here: https://stackblitz.com/edit/vitejs-vite-sgazgn?file=src%2FApp.svelte

In this one, the error is logged only once - when the App component is initially loaded. Toggling the promise doesn't re-trigger the error message.

Logs

chunk-TG5ZCBZ3.js?v=c5f2595f:2344 
 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$destroy')
    at chunk-TG5ZCBZ3.js?v=c5f2595f:2344:20
(anonymous)	@	chunk-TG5ZCBZ3.js?v=c5f2595f:2344
Promise.then (async)		
disconnectedCallback	@	chunk-TG5ZCBZ3.js?v=c5f2595f:2342
detach	@	chunk-TG5ZCBZ3.js?v=c5f2595f:432
detach_dev	@	chunk-TG5ZCBZ3.js?v=c5f2595f:2505
destroy	@	App.svelte:24
update2	@	chunk-TG5ZCBZ3.js?v=c5f2595f:1683
handle_promise	@	chunk-TG5ZCBZ3.js?v=c5f2595f:1715
update	@	App.svelte:20
update	@	chunk-TG5ZCBZ3.js?v=c5f2595f:1325
flush	@	chunk-TG5ZCBZ3.js?v=c5f2595f:1291
init	@	chunk-TG5ZCBZ3.js?v=c5f2595f:2191
App	@	App.svelte:26
createProxiedComponent	@	svelte-hooks.js?v=c5f2595f:341
ProxyComponent	@	proxy.js?v=c5f2595f:242
Proxy<App>	@	proxy.js?v=c5f2595f:349
(anonymous)	@	main.ts:4

System Info

Tested in Firefox and Edge.

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^4.0.5 => 4.1.1

Severity

annoyance

[dummdidumm]

Fixed in Svelte 5