Reseting state during on mount will cause a race condition inside key/each block

[ivenuss]

Describe the bug

When resetting item state to undefined during onMount or immediately in $effect, then it will crash because the each or key block can no longer access the item.id even though it's inside if block.

It looks like race condition, since if I wait one tick inside the onMount and then reset the value to undefined then it works.

Reproduction

Playground: https://svelte.dev/playground/7d7b34facedb4e4594f7175aaf805f8a?version=5.39.2

<script>
  let item = $state({ id: '1' });

  $effect(() => {
    // Clear the item
    item = undefined;
  });
</script>

{#if item}
  <!-- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id') -->
  {#key item.id}
	  {item.id}
  {/key}
  {#each [item.id] as id}
    {id}
  {/each}
{/if}

System Info

Svelte: 5.39.2

Severity

blocking

[ivenuss]

Might be related with this issue #16775 (comment)

[ivenuss]

This issue was introduced in 5.38.2, so I'm guessing #16631 PR could cause it.

[hmnd]

I've been looking into this this afternoon. I've found that sorting eager_block_effects by depth fixes the guard-derived-nesting test (reproing this issue) from #16881 passes, but I suspect there's a better way than sorting on every flush. Just figured I'd note this down here in case someone gets to it before me.