Closed
Description
Describe the bug
In the example code, it seems to behave correctly, unless CounterDisplay.svelte content is changed to cause a vite module hot-reload. After the hot reload, every state change causes "ownership_invalid_mutation" warnings.
This particular issue is only reproducible locally, clone this repo to test it out.
+page.svelte
<script>
import CounterDisplay from "./CounterDisplay.svelte";
let counter = $state({
count: 0,
});
</script>
<CounterDisplay bind:counter></CounterDisplay>
CounterDisplay.svelte
<script>
import Incrementer from "./Incrementer.svelte"
let {counter = $bindable()} = $props()
</script>
<!-- Warning shows when this component is hot reloaded. For example added a new div here. -->
<p>Counter is {counter.count}</p>
<Incrementer bind:count={counter.count}></Incrementer>
Incrementer.svelte
<script>
let {count = $bindable()} = $props();
</script>
<button onclick={()=>{count += 1}}>Go up</button>
Reproduction
Reproducible in this repo.
- Load root page to see counter working correctly, without warning
- In
CounterDisplay.svelte
, make any html change, such as added a new div, in order to trigger a vite hot reload. - Further state change to the counter now raises
ownership_invalid_mutation
warning in browser console.
Logs
ownership_invalid_mutation
src/routes/test/CounterDisplay.svelte mutated a value owned by src/routes/test/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback insteadlback instead
https://svelte.dev/e/ownership_invalid_mutation
System Info
System:
OS: Windows 11 10.0.22631
CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
Memory: 3.14 GB / 15.57 GB
Binaries:
Node: 22.1.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.12.3 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (127.0.2651.98)
Internet Explorer: 11.0.22621.3527
Severity
annoyance