Async component with $bindable causes rune_outside_svelte error

[dylan1951]

Describe the bug

When a component uses a $bindable prop and also uses top-level await in the <script /> it causes rune_outside_svelte error

This bug was introduced in 5.43.0

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-3jkmgudh?file=src%2Froutes%2F%2Bpage.svelte

Logs

Svelte error: rune_outside_svelte
The `$bindable` rune is only available inside `.svelte` and `.svelte.js/ts` files
https://svelte.dev/e/rune_outside_svelte
    at Module.rune_outside_svelte (/home/projects/sveltejs-kit-template-default-3jkmgudh/node_modules/svelte/src/internal/client/errors.js:436:17)
    at get (/home/projects/sveltejs-kit-template-default-3jkmgudh/node_modules/svelte/src/index-client.js:63:28)
    at eval (/home/projects/sveltejs-kit-template-default-3jkmgudh/src/routes/Component.svelte:22:51)
    at eval (/home/projects/sveltejs-kit-template-default-3jkmgudh/node_modules/svelte/src/internal/server/renderer.js:164:13)

Node.js v20.19.1

System Info

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: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: 5.43.0 => 5.43.0

Severity

annoyance

[dylan1951]

Please let me know if anyone finds a workaround. I can't downgrade because of a different bug that was fixed

[7nik]

Simple REPL

[nevil2]

I do not know whether I had same error, but 5.43.0 is completely broken. It showed unhelpful boundary error on initial loading. I had to roll back to v5.42.3.

I should say that I am a massive fan of Svelte and, in general, svelte has given me few problems like this.

[sillvva]

If the reason you need to await before $props is to pass an awaited value to $bindable default or some other default value, this could be a temporary workaround until the bug is fixed.

https://svelte.dev/playground/607c65ac98064325ad18ead3ac13451b?version=5.43.0

It still uses the value passed if set, and assigns the awaited value if not.

<script lang="ts">
	import { delayed } from "./util";
	let { value = $bindable() }: { value: string } = $props();
	value ??= await delayed(() => "Hello World!");
</script>

{value}

EDIT: Nevermind! Looks like a workaround won't be necessary 😁