sveltejs/svelte

Function bindings broken in async component

Opened this issue · 4 comments

Describe the bug

Since 5.43.0 function bindings are throwing various errors in async components.

Reproduction

REPL

<script>
	await 1;
	
	let value = $state('');

	function getValue() { return value }

	function setValue(v) { value = v }
</script>

<input bind:value={getValue, setValue} />

Logs

Cannot read properties of undefined (reading 'f') in <unknown> in __wrapper.svelte

System Info

Svelte playground

Severity

blocking an upgrade

I haven't looked at the code, but I wonder if it's possible to add a step to run all existing tests but with await 1 appended at the top, this would have caught many of the issues reported recently.

In my experience, you declare everything else on top and move the await stuff to the very bottom of the script tag, so that they don't block the sync code. Or move it to the mark up with {@const foo = await...}, which seems to solve a lot of problems for me (currently have none)
await at the bottom

We probably need to extend the "which of these things are needed to be awaited" logic to functions and analyze their body

Even something this simple is broken:

<script>
    let foo = $derived(await 1);
</script>

{#await foo}
    <p></p>
{/await}

REPL

It gives the same error but idk if different bug?