[Svelte 5] `{#if}` block with several reactive children does not re-render properly

[GauBen]

Describe the bug

Given the following +page.js:

export const load = ({ url }) => {
  return url.searchParams.get("event")
    ? {
        event: {
          author: "John Doe",
          body: "Body",
        },
      }
    : {};
};

And a +page.svelte:

<script lang="ts">
  const { data } = $props();
  const { event } = $derived(data);
</script>

{#if event}
  <h1>{event.author}</h1>
  <p>{event.body}</p>
{/if}

<a href="?event=1">Open event</a>
<a href="?">Close</a>

Clicking Open event will show a title and a body, clicking Close will close it, clicking Open event again will do nothing.

Very small changes can make it work:

• Removing <p>{event.body}</p> will fix the issue
• Adding $inspect(event) will fix the issue

(This is likely to be a quatum physics issue given that observing the behavior changes it 😂)

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-mhzb7t?file=src%2Froutes%2F%2Bpage.js

Logs

No response

System Info

5.0.0-next.167

Severity

blocking an upgrade

[GauBen]

Hey @dummdidumm thanks for working on this, I just bumped to 168 and the bug is still happening

[dummdidumm]

(me referencing that issue was a mistake, this bug seems unrelated)

REPL reproduction

[GauBen]

You managed to reproduce! I failed doing so without Kit