Outros undefined when transitioning to another page

[matyunya]

Couldn't get a REPL repro but If I try to navigate from https://smelte-8z4ib07lj.now.sh/components/tabs to any other page I get this error:

index.mjs:629 Uncaught (in promise) TypeError: Cannot read property 'callbacks' of undefined
    at U (index.mjs:629)
    at Object.o (Waypoint.svelte:116)
    at hn (index.mjs:761)
    at Object.o (Image.svelte:27)
    at hn (index.mjs:761)
    at Object.o (tabs.c766b77c.js:1)
    at hn (index.mjs:761)
    at Object.o (TabButton.svelte:11)
    at hn (index.mjs:761)
    at Object.o (Tab.svelte:6)
</details>

At this line:

function transition_out(block, local, callback) {
    if (block && block.o) {
        if (outroing.has(block))
            return;
        outroing.add(block);
        **outros.callbacks.push(() => {**
            outroing.delete(block);
            if (callback) {
                block.d(1);
                callback();
            }
        });
        block.o(local);
    }
}

Works https://smelte-8z4ib07lj.now.sh/components/tabs

Doesn't https://smelte-ocubxglhw.now.sh/components/tabs

Not sure what causes the error so I simply patched it by adding an extra check if outros.callbacks is set.

[jorgegorka]

I'm having the same issue.

To reproduce it you can clone Svelte Firebase and Svelte Router SPA and update the Svelte dependency to anything above 3.5.1 (latest version tested 3.6.1) I had to lock up the Svelte version to 3.5.1 because of that.

[matyunya]

@jorgegorka
I submitted a PR for the issue. Can you try it with https://github.com/matyunya/svelte?

[jorgegorka]

@matyunya It works perfect.

[matyunya]

@jorgegorka Great! Well, let's hope it gets merged!

[Rich-Harris]

Is anyone able to create a simple repro? The repos mentioned above seem to have some additional setup requirements. If someone can create a REPL demo that'd be ideal. I'd rather we can understand the root issue and fix it rather than working around it 😀

[matyunya]

So far I only got that the problem occurs when the unmounting component is third party. That is importing locally a component with exactly same code has no issues.

[matyunya]

this.branches[0].block.has_outro_method

is mistakenly set to true in IfBlockWrapper, changing that to false solves the issue. Only thing left to find who does that.

[jorgegorka]

@Rich-Harris @matyunya I was trying to create a simple repo and I noticed that in Svelte 3.6.4 the problem is gone. Last time I checked was with version 3.6.1.

[matyunya]

I still get it if I try to import a component like this from a third party package.

{#if true}
  <slot/>
{/if}

[btakita]

I'm also getting this issue as of the 3.6.4 release on a sapper project. I'm not using a component from a third party package. Unfortunately, I don't have a simple repro. I do have some descriptions of state with SSR, a conditional using a store, & a child component.

This causes the issue. I completely emptied out <Nav> to where it was a blank component.

{#if !$__hide__header}
	<header>
		<div class="container">
			<Nav></Nav>
		</div>
	</header>
{/if}

This does not cause the issue.

{#if !$__hide__header}
	<header>
		<div class="container">
		</div>
	</header>
{/if}

The __hide__header store is derived.

In SSR, $__hide__header is true meaning <header> is not rendered in SSR. Upon hydration, it appears that $__hide__header initializes as false then is set to true.

[Rich-Harris]

Is this issue still live or is it fixed as of 3.6.7?

[jorgegorka]

I've updated Svelte to 3.6.7 and the problem is back

`
Uncaught (in promise) TypeError: Cannot read property 'c' of undefined

at transition_out (index.mjs:630)
at Object.outro [as o] (index.svelte:31)
at transition_out$1 (index.mjs:634)
at Object.outro [as o] (route.svelte:8)
at transition_out$1 (index.mjs:634)
at Object.update [as p] (route.svelte:9)
at update$1 (index.mjs:584)
at flush$1 (index.mjs:558)

`

function transition_out(block, local, detach, callback) {
    if (block && block.o) {
        if (outroing.has(block))
            return;
        outroing.add(block);
     ===>   outros.c.push(() => {    <=====
            outroing.delete(block);
            if (callback) {
                if (detach)
                    block.d(1);
                callback();
            }
        });
        block.o(local);
    }
}

[matyunya]

it's fixed for me. @jorgegorka can you upload your repo?

[jorgegorka]

I think I've found the issue. There was a mismatch between the Svelte version required by Svelte Router SPA and the version in my repo. Now both are using 3.6.7 and all is good again.