await order breaks `bind:`

[techniq]

Describe the bug

If you use await in <script> before a binded $state variable, an error is thrown:

Cannot read properties of undefined (reading 'f')

For example, this works:

<script>
	import Input from './Input.svelte';

	let value = $state(0);
	let data = await fetch('...');
</script>

<Input bind:value />

but this throws an error:

<script>
	import Input from './Input.svelte';

	let data = await fetch('...');
	let value = $state(0);
</script>

<Input bind:value />

Reproduction

REPL

Logs

Error: Cannot read properties of undefined (reading 'f')

	in <unknown>
	in __wrapper.svelte

    at get (playground:output:3903:22)
    at get value (playground:output:4737:13)
    at eval (playground:output:4622:87)
    at capture_store_binding (playground:output:4572:12)
    at prop (playground:output:4622:36)
    at Input (playground:output:4711:3)
    at App.add_svelte_meta.componentTag (playground:output:4735:10)
    at add_svelte_meta (playground:output:568:11)
    at App (playground:output:4734:3)
    at add_svelte_meta.componentTag (playground:output:4770:27)

System Info

svelte@5.43.2

Severity

blocking an upgrade

[alexvdvalk]

It works on v5.42.3

[nevil2]

I have same bug on all my SvelteKit projects with svelte@5.43+.
Confirmed this with:

let item = (await await getStrapi(`/shop-items/${page.params.slug}`)) as ShopItem
let availableStock = $derived(item ? shop.availableStock(item) : 0)
let selectedImage = $state<any>(null)
let modalOpen = $state(false)

which failed, whereas code adapted as above works:

let selectedImage = $state<any>(null)
let modalOpen = $state(false)
let item = (await await getStrapi(`/shop-items/${page.params.slug}`)) as ShopItem
let availableStock = $derived(item ? shop.availableStock(item) : 0)

Unfortunately, I have 80,000 lines of Svelte code, so applying fix to every component is not practical. And then everything will need testing.

Due to strange behaviour on v5.42, I've been forced to stick at 5.41.4 (SvelteKit 2.47.3)

Until Svelte fixes the issues, I will be unable to upgrade.

[sillvva]

Also experiencing this on 5.43.3.

Similar issue in here. Binding to a $state declared after an await results in issue.

[sillvva]

I see it's primarily an issue with binding to a component prop. Binding to an HTML attribute works fine. Still a bug, and doesn't fix the issue here.

- <Input bind:value ...
+ <input bind:value ...

[dylan1951]

I also have this issue REPL broken since 5.43.0

<script>
	await 1;

	let buttonRef = $state(null);
</script>

<button bind:this={buttonRef}>Button</button>

<p>
	buttonRef: {buttonRef ? '✅ exists' : '❌ undefined'}<br>
</p>