Uncaught Svelte error state_unsafe_mutation with a $state boolean variable

[GELight]

Describe the bug

Hi,

I have a problem using a variable let show = $state<boolean>(false); in an input property where I want to change a customElement component to show in order to display it. Now I have created a test environment where I rebuilt the same structure as in my real project but simplified it for this issue.

I develop customElements for a lib which I use in my project. Currently I try to refactor all my components from svelte 3 or 4 into the new svelte 5 world. :)

Reproduction

Example Repo where the error occurs:
https://github.com/GELight/svelte-5-test

The error occurs in this file on line 16:
svelte-5-test/projects/test/src/components/Payment/Payment.svelte

The Uncaught Svelte error state_unsafe_mutation error occurs when I click on the button.
The button just toggle the variable let show = $state<boolean>(false); which is used for the input property "show" of the modal component.

If I change the line with the modal from <cow-ps-modal show={show}> to <cow-ps-modal show={true}> my modal will shown correctly.

Logs

chunk-W7PIA73A.js?v=ecc6957c:242 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`
at state_unsafe_mutation (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-W7PIA73A.js?v=ecc6957c:242:19)
at set (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-W7PIA73A.js?v=ecc6957c:2316:5)
at http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-Y7T4CSNN.js?v=ecc6957c:2881:9
at set show (http://localhost:5173/src/components/Modal/Modal.svelte:140:4)
at Svelte4Component.set [as show] (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-ROMLSAP6.js?v=ecc6957c:715:46)
at Class.set (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-Y7T4CSNN.js?v=ecc6957c:3264:31)
at Module.set_custom_element_data (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-Y7T4CSNN.js?v=ecc6957c:1413:17)
at {expression} (http://localhost:5173/src/components/Payment/Payment.svelte:103:28)
at update_reaction (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-W7PIA73A.js?v=ecc6957c:1668:23)
at update_effect (http://localhost:5173/@fs/home/........./svelte-5-test/node_modules/.vite/deps/chunk-W7PIA73A.js?v=ecc6957c:1759:21)

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 6.91 GB / 30.48 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.7.0 - ~/.nvm/versions/node/v22.7.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.7.0/bin/npm
  Browsers:
    Brave Browser: 129.1.70.123
    Chrome: 129.0.6668.89
  npmPackages:
    svelte: 5.0.5 => 5.0.5

Severity

annoyance

[GELight]

Hi,

Just a quick follow-up.
Were you able to reproduce my error? Is it an error in my code or a bug in Svelte?

I have just tested it again with version 5.1.4. Unfortunately without success.

Best regards,
Mario

[trueadm]

I put up a PR that should hopefully resolve this if merged #14016

[GELight]

Is this fix already published?
I tested my problem with version 5.1.6 but the error still exists.

[knd775]

Is this fix already published? I tested my problem with version 5.1.6 but the error still exists.

It's not, you can check that here:
https://github.com/sveltejs/svelte/compare/svelte@5.1.6...main

[GELight]

Many thanks for this fast answer. 👍

[m-poh]

i think its still not in 5.2.10? post-poning my migrations until then.

[trueadm]

i think its still not in 5.2.10? post-poning my migrations until then.

It was released a while ago. Does it still affect you on the latest version?

[m-poh]

it seems i had an issue where i was mutating a state in a derived statement. when i was reading the docs, then it says that you cannot mutate state in a statement inside derived. just to clarify, is this just a runtime check? or should there be some compile-time checks as well?

edit: to clarify, my complex example worked in the dev server, but errored in a web component. but my simple reproduction fails in the dev server as well.

[trueadm]

@m-poh You can't mutate state in a derived and we only detect it at runtime as reactivity is runtime driven. We might be able to detect some obvious cases at compile time, but it won't catch them all.