Describe the bug
Hard to explain beyond the title, but here goes:
- Parent component has
data state with a things array in it: let data = $state({things: [...]})
- Parent conditionally renders child component:
{#if data} <ThingList things={data.things} /> {/if}
- ThingList calls
$inspect(things) on things prop being passed to it
- When the
data state in Parent becomes null, $inspect in the child throws in error.
- Removing the
$inspect(things) call in ThingList makes the error go away.
I suspect it's something weird going on with references, but I don't really know what's going on under the hood so that's a complete guess.
Reproduction
https://svelte.dev/playground/9554421a0ca547089ee1e27e7e258845?version=5.25.12
code
<!-- App.svelte -->
<script>
import ThingList from "./ThingList.svelte"
let data = $state({things: [{id:1}, {id:2}]})
function reloadData() {
data = null
setTimeout(() => {
data = {things: [{id:1}, {id:2}]}
}, 1000)
}
</script>
{#if data}
<ThingList things={data.things.map((t) => t)} />
{/if}
<button onclick={() => reloadData()}>
clear
</button><!-- ThingList.svelte -->
<script>
let {things} = $props();
$inspect(things);
</script>
<ul>
{#each things as thing}
<li>thing {thing.id}</li>
{/each}
</ul>
Logs
TypeError: get(...) is null
get things playground:output:3916
ThingList playground:output:3881
inspect playground:output:3270
update_reaction playground:output:2235
update_effect playground:output:2401
internal_set playground:output:1116
set playground:output:1057
on_click playground:output:3897
handle_event_propagation playground:output:2920
event_handle playground:output:3109
_mount playground:output:3124
mount playground:output:3079
<anonymous> playground:output:3898
<anonymous> about:srcdoc:45
srcdoc:253:15System Info
System:
OS: Linux 6.14 Arch Linux
CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
Memory: 53.79 GB / 61.93 GB
Container: Yes
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.13.1/bin/yarn
npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
npmPackages:
svelte: ^5.20.4 => 5.25.8Severity
blocking all usage of svelte
Describe the bug
Hard to explain beyond the title, but here goes:
datastate with athingsarray in it:let data = $state({things: [...]}){#if data} <ThingList things={data.things} /> {/if}$inspect(things)onthingsprop being passed to itdatastate in Parent becomes null, $inspect in the child throws in error.$inspect(things)call in ThingList makes the error go away.I suspect it's something weird going on with references, but I don't really know what's going on under the hood so that's a complete guess.
Reproduction
https://svelte.dev/playground/9554421a0ca547089ee1e27e7e258845?version=5.25.12
code
Logs
TypeError: get(...) is null get things playground:output:3916 ThingList playground:output:3881 inspect playground:output:3270 update_reaction playground:output:2235 update_effect playground:output:2401 internal_set playground:output:1116 set playground:output:1057 on_click playground:output:3897 handle_event_propagation playground:output:2920 event_handle playground:output:3109 _mount playground:output:3124 mount playground:output:3079 <anonymous> playground:output:3898 <anonymous> about:srcdoc:45 srcdoc:253:15System Info
System: OS: Linux 6.14 Arch Linux CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor Memory: 53.79 GB / 61.93 GB Container: Yes Shell: 5.9 - /bin/zsh Binaries: Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v22.13.1/bin/yarn npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm npmPackages: svelte: ^5.20.4 => 5.25.8Severity
blocking all usage of svelte