Svelte 5: Error: x is not defined

[98mux]

Describe the bug

This code:

<script>
		let arr = $state([1,2,3]);
</script>

{#each arr as value}
        <button onclick={() => value += 1}>Click me and get error</button>
{/each}

causes the error "Error: arr is not defined"
When clicking on the button.

No idea if this has been posted before or not

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA0WOQQ6CMBBFrzKpLiCSEHSHQGI8BmVRy6iNpSXtQGIa7m4RE2f3Z97k_cDuSqNnZRuYEQOykl3GkWWM3uMa_IyaMGZvJyfXTeWlUyM13HDipJFAOAc17D0JwqQtsmN26tIzN1X-R03YoZDPLys8zEJPuHADv6luE5E1YI3USr7qkKRQNxsGhxqKpbmuBxgQhOnhEbXonHVVvn1GR8hXwxK7DrZXd4U9K8lFTbd8AOl8PbvmAAAA

Logs

No response

System Info

repl

Severity

annoyance

[eddiemcconkie]

I don't think this is a Svelte 5 bug. In your #each block, value is just a number, so if you click the first button you're basically doing 1 += 1 and the error is coming from trying to reassign a number.

You'd probably want to do something like this, where you update arr by index: REPL

[brunnerh]

Not quite, this is still a loop variable but reassigning such a variable has no effect on the original array, so there probably should be a compiler warning or error pointing that out.

If this were to compile to a for (const value of arr) ... loop, the reassignment really would be impossible at the language level.