[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

[GauBen]

It turns out the bug is still there, but instead of not displaying the content of the {#if} after the first toggle, it happens after the second one:

Recording.2024-07-01.210516.mp4

I can try creating a repro in the REPL if it helps. The exact code is the following:

https://github.com/GauBen/timeline/blob/2f0e1bd1c9b723158e25d8833b98e4dd5d0285fd/packages/app/src/routes/(authentified)/(app)/%5B%5Busername%3Dusername%5D%5D/%5B...date%3Dplaindate%5D/%2Bpage.svelte#L62-L74

[trueadm]

@GauBen Have you tried the latest version? A REPL link would be preferable too :)

[GauBen]

Yes, I bumped to 5.0.0-next.169 and instead of not showing after the first toggle, it fails after the second toggle

[trueadm]

@GauBen Is it the same in dev and prod?

[GauBen]

Just tried, it behaves the same in dev and prod

I don't know how to reproduce in REPL yet

[GauBen]

If that helps:

• event.id is a bigint
• event.date is a Date object, not a SvelteDate one

Update:

• Adding a top-level $inspect(event); fixes the issue

• {#if event}
    <h1>{event.author.displayName}</h1>
    <p>{event.body}</p>
    <a href={$page.url.pathname}>Close</a> <!-- Removing this will fix the issue -->
  {/if}

[GauBen]

Here is a stackblitz of the issue https://stackblitz.com/edit/sveltejs-kit-template-default-mhzb7t?file=src%2Froutes%2F%2Bpage.svelte,package.json

Can you please re-open?

[henrikvilhelmberglund]

Also works when replacing {#if event} with {#if data && event}.

[GauBen]

Thanks for all the hard work Svelte team!