Svelte 5: Cannot reassign or bind to each block argument in runes mode. What should I use instead?

[frederikhors]

Describe the bug

In Svelte 4 app I was using:

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player />
{/each}

Now with Svelte 5 it errors with:

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)

Why?

Should I use the below instead?

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player={players[i]} />
{/each}

Also if I use the latter one player is unused and I get the ts warning:

'player' is declared but its value is never read. ts(6133)

Plus, with the latter one I get another typscript warning:

'players' is possibly 'null' or 'undefined'. ts(18049)

even if I'm already inside an {#each players.

There is no docs on this on https://svelte-5-preview.vercel.app/docs, right?

System Info

`"svelte": "5.0.0-next.120"`

Severity

blocking an upgrade

[frederikhors]

@Conduitry docs update is a issue I think.

[paoloricciuti]

Yes you should use

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player={players[i]} />
{/each}

the warning is probably coming from eslint, a usual fix is prepending (or even substituting) player with _

{#each players || [] as _, i}
    <FormPlayer index={i} bind:player={players[i]} />
{/each}

but it depends on how your eslint is configured

The last error is probably fine to shut up with a ts-ignore since there's never a moment when you would access players[i] if players is null. You can also wrap the whole thing with an if

{#if players}
    {#each players as _, i}
        <FormPlayer index={i} bind:player={players[i]} />
    {/each}
{/if}

[frederikhors]

Yeah. Thanks. All already tried. But I would like to improve eslint package to avoid workarounds.

[paoloricciuti]

Well eslint it's actually right here...you are not using person in this case and there's not much we can do about it 😄

[frederikhors]

I'm talking about opening an issue here: https://github.com/sveltejs/eslint-plugin-svelte. I'll now.

[frederikhors]

Or this: https://github.com/sveltejs/language-tools.

[frederikhors]

Opened sveltejs/language-tools#2365.