v5.45.3 breaks using prop inside $state (state_referenced_locally error)

[KieranP]

Describe the bug

<script>
  import Form from './Form.svelte'

  let client = $state({
    name: 'Bob',
    cats: [
      { name: 'Milli'}
    ]
  })
</script>

<Form {client} />

<script>
  const { client } = $props()

  let cats = $state(
    client.cats.map((cat) => ({
      ...cat,
      _id: Math.random(),
    })),
  )
</script>

{#each cats as cat (cat._id)}
  {cat.name}
{/each}

This used to be a perfectly fine use of Svelte, but now Svelte won't compile because it doesn't like the use of client inside $state (throws a state_referenced_locally error)

Not shown above (but added to reproduction below), later on I use cats.push({ ... }) and the each block updates accordingly.

Now, Svelte insists on me using $derived instead, but when I use $derived and later push to cats, the each block doesn't update...

If $state is not longer supported and $derived does not work for other usecases, what is the right way forward here?

(edit: I just saw a few other closed issues suggesting using ignore comments.... this should not be the recommended approach. Our production app uses the above pattern extensively, we would be littering our codebase with 100s of ignore lines, OR have to disable globally and silence other areas where this uses to error)

Reproduction

Works: https://svelte.dev/playground/f144d8e9a4b1440898f3cf139d9a6aab?version=5.45.2
Broken: https://svelte.dev/playground/f144d8e9a4b1440898f3cf139d9a6aab?version=5.45.3

(see Form.svelte)

Logs

System Info

System:
    OS: macOS 26.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 149.77 MB / 18.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 24.8.0 - /Users/kieran/.asdf/installs/nodejs/24.8.0/bin/node
    npm: 11.6.3 - /Users/kieran/.asdf/plugins/nodejs/shims/npm
    pnpm: 10.24.0 - /Users/kieran/.asdf/installs/nodejs/24.8.0/bin/pnpm
    bun: 1.3.3 - /opt/homebrew/bin/bun
    Deno: 2.5.6 - /opt/homebrew/bin/deno
  npmPackages:
    svelte: 5.45.5 => 5.45.5

Severity

blocking an upgrade

[Conduitry]

It's not an error, it's a warning. Duplicate of the other issues you've found.

[KieranP]

@Conduitry Except for some reason in my SvelteKit project, it's coming across as an error, and I don't have anything in svelte.config.js that would be changing it to be an error....

Why introduce such a warning now? Ours can't be the only codebase that has been built using this pattern and now needs to litter it with ignore comments...

[KieranP]

If the right solution is to use $derived, can $derived be made so that when it is updated, it also triggers a rerender of the component? Otherwise something like this doesn't work: https://svelte.dev/playground/3b003aaf966241079ce451395beb8bed?version=5.45.3

[benmccann]

You need to change

function addCat() {
	cats.push({
		_id: Math.random(),
	})
}

To:

function addCat() {
	cats = [...cats, {
		_id: Math.random(),
	}]
}

The issue you encountered using $derived is that $derived is not deeply reactive

[sillvva]

If you want it to be deeply reactive you can do this until a better solution is decided.

let value = $derived.by(() => {
  let _ = $state(prop);
  return _;
});