A component's content is rendered while the component is not mounted, when using {#key}

[webJose]

Describe the bug

Ok, just thinking about an appropriate title was difficult.

Here it goes, my attempt to describe this problem.

Background

Making an online REPL demo for my router (@wjfe/n-savant), I decided to show a simple way to add transitions. It works. However, if the matching route itself continues to match after navigating (in the demo's case, a route parameter changes), then animation doesn't take place because the component is not being destroyed so transitions don't happen.

This is the REPL: @wjfe/n-savant demo

So I figured: Ok, if the Svelte tutorial ever taught me anything is that I can trigger transitions using {#key}. So let's add {#key rp} (rp is a reactive object that holds the matching route's parameter values) to AniRoute.svelte.

The Issue

Refer to this other REPL: @wjfe/n-savant playground

Open it, navigate to either "Big", "Medium" or "Small", then back to "Home". What you're seeing is the Home.svelte component and the Logos.svelte component being rendered at the same time. It is the big logo regardless of your previous choice because the route param that dictates the logo size named "variant" has changed to undefined. This means the big logo.

Logic issue? Doesn't look like it. Check the console log:

# These lines appear when you navigate to a logo route.
logo RS from router (update): {match: true, routeParams: {…}}
Variant: 64
Logos mounted.

# These lines appear when you go back home.
logo RS from router (update): {match: false, routeParams: undefined}
Logos unmounted.

"Logos unmounted.". Well, its contents are visible. Why?

Reproduction

I don't have a minimal reproducible example, even though I have tried for hours to reproduce. I just don't know what triggers it, except that it has to do with {#key}.

If we remove {#key} (AniRoute.svelte, line 21) then everything works just fine.

Maybe this requires a master in Svelte internals to understand. I haven't been able to figure this one out. I'll continue trying as time permits.

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 11.43 GB / 31.77 GB
  Binaries:
    Node: 24.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 11.2.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[sularome]

I think i have a similar issue where component tries to render even though there is {#if} around it which makes it throw an error. Here is a link to the playground: https://svelte.dev/playground/9cfde8d2fc89454bbdc1cac49f852518?version=5.38.10
Repro steps:

1. Open the playground
2. Click on toggle button

Expected behavior:
Not to have error in console

Actual behavior:
There is an error in the console:

playground:output:5638 Uncaught TypeError: Cannot read properties of null (reading 'name')

	in <unknown>
	in App.svelte
	in __wrapper.svelte

    at eval (playground:output:5638:38)
    at untrack (playground:output:4240:11)
    at eval (playground:output:5638:7)
    at eval (playground:output:3340:39)
    at update_reaction (playground:output:3877:17)
    at update_effect (playground:output:4057:19)
    at create_effect (playground:output:3160:5)
    at eval (playground:output:3340:4)
    at flatten (playground:output:1579:4)
    at template_effect (playground:output:3339:3)

[ystoev]

From what i tested in the playground this reproduces from version 5.38.2

[PatrickG]

Someone on discord discovered a similar issue (also starting with 5.38.2) with the {:else}-block a while back.

Clicking the "effect" button in this reproduction logs "one". So the :else-block seems to get rendered for a split second.
I think this happens because #16631 changed the flow to this:

• v starts as 'two' - so the {#if v === "one"}-block is false, but the {:else if v === "two"}-block is true, so it's content is being rendered
• v changes from 'two' to 'one' - instead of rerunning the {#if v === "one"}-block, the {:else if v === "two"} block reruns and becomes false, which results in rendering the content of the {:else}-block
• then the {#if v === "one"}-block reruns

But there is somethings strange: in this example v starts as 'one'. So I would expect the {:else} block to be rendered for a split second when clicking the "effect" button twice. But it does not happen. No log.

Also, mutating v directly, not in an effect, does not render the {:else} either: example.