"Prefer using writable $derived instead of $state and $effect" but it doesn't work

[frederikhors]

I have this code (REPRODUCTION HERE):

let formPlayer = $state(newFormPlayer({}));

$effect(() => {
    formPlayer = newFormPlayer({ player: newPlayerFromData(data) });
});

Then this errors appears:

Prefer using writable $derived instead of $state and $effect eslintsvelte/prefer-writable-derived
let formPlayer: PlayerForm

Then I rewrite this to (REPRODUCTION HERE):

let formPlayer = $derived(
    newFormPlayer({ player: newPlayerFromData(data) })
);

but in the browser I cannot use it:

[svelte] binding_property_non_reactive `bind:id={formPlayer.player.name}` (Form.svelte:12:20) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive

System Info

svelte@5.28.6

Severity

annoyance

[dummdidumm]

You still need to make the player $state, else its properties aren't reactive. In your example you can use $derived.by for this