$inspect in child component wrapped in {#if} block throws error when if block becomes falsy

[AlexJMohr]

Describe the bug

Hard to explain beyond the title, but here goes:

1. Parent component has data state with a things array in it: let data = $state({things: [...]})
2. Parent conditionally renders child component: {#if data} <ThingList things={data.things} /> {/if}
3. ThingList calls $inspect(things) on things prop being passed to it
4. When the data state in Parent becomes null, $inspect in the child throws in error.
5. 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:15

System 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.8

Severity

blocking all usage of svelte

[Ocean-OS]

Related #15697

[Ocean-OS]

I think this is an issue with the scheduling of sync effects. We should probably sort their execution so that effects from parent components are executed before effects from child components, and remove child component effects from the queue if the execution of a parent component's effect destroys the child component.

[Wiblz]

Another manifestation of this issue (possibly): https://svelte.dev/playground/2ec92b407d214248bb7f2d2e4434e5aa?version=5.28.2

In this example, when name is set to null, derived state inside the component is updated before component destruction as the state is exported and referenced outside the component. This violates the invariant of name never being nullish (because of {#if} close) and causes an error.
Removing external references to the state fixes the issue.

[CaptainCodeman]

Just been hit by this - weird errors in the app that all went away when I removed $inspect