Skip to content

Svelte 5: (Non-Runes) Values assigned during $: { } are (in some cases?) not properly reactive later #10129

@Conduitry

Description

@Conduitry

Describe the bug

<script>
	let array;
	$: {
		array = []
		array[0] = [false, false];
		array[1] = [false, false];
	}
</script>

{#each array as row, i}
	{#each row as item, j}
		<button on:click={() => array[i][j] = !array[i][j]}>{item}</button>
	{/each}
	<br>
{/each}

(Apologies for the weird repro. I tried a couple of other things, but couldn't find anything simpler.)

In Svelte 4, clicking the buttons toggles their text. In Svelte 5, it does not. There are a couple of things that seem to be necessary for this issue to arise. One is the value being assigned inside a reactive block. (If the contents of the reactive block instead appear at the top-level of the component, this works fine.) The other is it being a two-dimensional array.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACnWQwW7DIBBEf2VLe2glS26vBFvKd2AOhGCVFIMF61YR4t_rtSPVl55W82Z3RlDY6LzNjMvCgp4s4-w8z6xheJ9J5G_r0a46xyUZIiKb5GbshzCgtwg6JX0_kXrhUGgOuDHoQKqDlu-K0Kh9tg1sQ52O_sc_fh2CaP9aQ3m22nzuxaAzpPjTgKu0-rBWQoZDOzVwq3uJuCyIMUAM3Hhnvrry-gZdv-dIp-SN-p8OsvaFIqpo99PtzaWlii1TXNKKHmD9oyle3ejslXFMi62q_gJLTy1NXgEAAA==

Logs

No response

System Info

n/a

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions