Uncaught Svelte error: state_unsafe_mutation

[stabldev]

Describe the bug

error:

Uncaught Svelte error: state_unsafe_mutation
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`

code:

$effect.pre(() => {
  import("$lib/icons.json", {
    assert: { type: "json" }
  }).then((res) => {
    const data = res.default;

    icons_json = structuredClone(data);
    icons = structuredClone(data);
  });
});

Reproduction

1. clone this repo
2. npm i && npm run dev
3. go to /icons route
4. open browser console.

Logs

No response

System Info

System:
    OS: Linux 6.11 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i3-8130U CPU @ 2.20GHz
    Memory: 3.71 GB / 7.66 GB
    Container: Yes
    Shell: 5.2.37 - /usr/bin/bash
  Binaries:
    Node: 22.10.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: 9.12.2 - /usr/bin/pnpm
  npmPackages:
    svelte: ^5.1.0 => 5.1.0

Severity

blocking an upgrade

[trueadm]

It's because you're mutating state here (it even tells you line in the component in the stack trace btw):

https://github.com/coreproject-moe/coreproject-moe.github.io/blob/master/src/routes/icons/%2Bpage.svelte#L74

You can't do .sort as it mutates the array, try .toSorted instead?

[stabldev]

It's because you're mutating state here (it even tells you line in the component in the stack trace btw):

https://github.com/coreproject-moe/coreproject-moe.github.io/blob/master/src/routes/icons/%2Bpage.svelte#L74

You can't do .sort as it mutates the array, try .toSorted instead?

yea, i somehow forgot to check L74, and yea it makes sense, .toSorted worked. thanks.