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.

[matyunya]

let's mark it D O N E

[rob-balfre]

Still getting this exact issue on 3.6.7. Only happens on external components (yarn linked in this case), if i use local components issue is resolved. Can't recreate in REPL. I've double checked all versions of Svelte are the same. Built using Webpack 4, yarn 1.16.0 and node v12.

This one is NASTY!

[Conduitry]

If it only happens with linked components, it's probably not the same issue. This should be fixed now in the Rollup versions of the templates, but I haven't looked into webpack yet. There's a comment here that sounds helpful.

[rob-balfre]

I've recreated the issue in this repro... https://github.com/rob-balfre/svelte-slot-example it will show you the error when you click on the button. Was nothing to do with yarn link.

@Conduitry thanks for the link will take a look.

[Conduitry]

https://github.com/sveltejs/svelte-loader#resolvemainfields You need resolve.mainFields. Not having this will cause the same problem that npm/yarn linking does - you have two copies of the Svelte shared internals in your app, which causes various issues.

I'm surprised this wasn't in the template yet in https://github.com/sveltejs/template-webpack/blob/master/webpack.config.js - I'll add it.

[rob-balfre]

@Conduitry but webpack doesn't compile if you add a resolve.mainFields.

ERROR in ./node_modules/slot-test/src/SlotTest.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <slot></slot>
 @ ./src/App.svelte 18:0-33 25:20-28
 @ ./src/main.js
 @ multi ./src/main.js

[Conduitry]

Oops, you also need to remove the exclude: /node_modules/ from the svelte-loader config. I'll update the template for that as well.

[rob-balfre]

Worked on my test-repo but not in my actual app 🤦It has a more complicated component lib setup. Can't we just add a catch like if (outros) outros.c.push(() => { to Svelte? This all worked fine in v2. This upgrade is killing me!

[pngwn]

We need a minimal reproduction.

[rob-balfre]

Ok can finally reproduce, only happens with yarn link!!!

Clone https://github.com/rob-balfre/svelte-slot-example and https://github.com/rob-balfre/fake-component-lib

Run yarn install and yarn link in fake-component-lib

Then in svelte-slot-example run yarn install, yarn link fake-component-lib and yarn dev. Click on the hide button and error shows.

[Conduitry]

If it only appears when linking dependencies, see this comment from earlier.

[rob-balfre]

BOOOM! Just needed...

alias: {
    svelte: path.resolve('node_modules','svelte')
},

Thanks @Conduitry

Hmm Do you think there is way to make it bit more friendlier though? The error message isn't very helpful.

[MatthiasGrandl]

@dimfeld ok nevermind it worked. My problem was that I installed my dependency for development like "@xxx/shared": "file:../../shared". When I actually installed it from our repo it works with dedupe: ['svelte']. Thanks for the tipp!

[mantismamita]

Hello, not sure why this issue is closed. Seems to still be a problem (using webpack and sapper). I've tried almost all of the solutions on this page and the only one working for me is from @QuickMick

{#each [...[]] as _}
  <div />
{:else}
  <ComponentFromOtherPackage  />
{/each}

[jakoritarleite]

I'm still getting this error on [email protected] with webpack, I've tried the @QuickMick thing but the error persists, removed all transitions from my code even from CSS and nothing seems to fix that soo far. I do also have the svelte alias on webpack configuration that @rob-balfre.

[deepmouse]

I've triggered this a couple of times with svelte-kit also. Not sure what the reason is, but at least the error message could be better...

Setting config.kit.vite.build.rollupOptions.dedupe doesn't help

I started debugging this by checking out commits in the history, and when I went back to the version that produces the error, the error no longer happens. Bizarre...

[DarthJonathan]

I've solved this bizarrely using

...
resolve: {
            mainFields: ['svelte', 'browser', 'module', 'main'],
...
}
...

in webpack config

[ulvido]

same problem for me:

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

with "svelte": "^3.0.0" and rollup.

I wanted to make a moduler design. I compiled main.js and bunch of apps seperately and individually.
when apps loaded, they send themselves with custom event like this:

...
// an app.js
const register = new CustomEvent(
  "REGISTER_APP",
  {
    bubbles: true,
    detail: appComponent,
  }
)
document.dispatchEvent(register);

main.js listens these app register events and render a tab for each app.
but, if the incoming "app" component includes any other nested component, the error occurs. for example when you switch tabs, the destroyed app component gives error:

...

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

any solution for this type of situation?

EDIT: temporary solution

...

-          outros.c.push(() => { // this push part gives the error
+          outros?.c?.push(() => { 

...

[alanleite]

Same problem here using the latest Svelte version... Should re-open this issue?

[mankins]

@alanleite I had the same issue and found that it was fixed by reverting to 3.38.2

[northkode]

Still having this issue with webpack and rollup(3.35.0), consuming an external component, if wrapped in a IF clause, it will produce the outro error, even tho we are not using a transition animation.

[braebo]

While it doesn't address the root of the problem- out of curiousity- is there a particular reason why checking for c first is a bad idea? Would something like c && or if (c) outros.c.push(() => { have negative consequences of some sort?

[QuickMick]

in my code, this was caused, because i had a second package, containing some of my abstract components and i think, i had a different versions of svelte in it.
so if you encounter this problem and this is also the case for you, maybe check, if you have "svelte": "index.js" configured in the package.json of your included package, as well as the same svelte version as in you main project (i am using "svelte": "3.42.1" )
and in your rollup.config.js

import resolve from "@rollup/plugin-node-resolve";

    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),

[gka]

I also ran into this while working on a hot-reloading of external svelte components. The scenario is this: I have a page that dynamically loads external components via <Component path="/path/to/compiled/svelte.js" />. My Component.svelte just wraps around <svelte:component> and uses require() to load the external component whenever path changes, like this

<!-- Component.svelte -->
<script>
    import { onMount } from 'svelte';

    export let path;
    let component;

    onMount(() => {           
       // error triggered by this line:
       window.subscribeHotReload(path, () => loadComponent(path));
       loadComponent(path);
    });

    function loadComponent(path) {
       require([`/lib/csr/${path}.js?c=${Math.round(1e6 * Math.random())}`], mod => {
           component = mod;
       });
    }
</script>

{#if component}
    <svelte:component this={component} />
{/if}

In my setup, the compiled Svelte builds are coming from the exact same rollup version & config.

Now I've tried to add hot-reloading using the subscribeHotReload method provided by my app. The server is watching for changes in the Svelte source files imported by /path/to/compiled/svelte.js and once they changed I send an event to the client via websocket, which then triggers the Component.svelte to re-require the /path/to/compiled/svelte.js. This will then load the fresh bundle, but once I set the component variable, Svelte triggers the Uncaught (in promise) TypeError: outros is undefined Error.

Not sure if this is helping, but I thought it's worth leaving here.

[Trystan-SA]

I encountered this issue 7 months ago. I can't believe it's still around now. This time it was because of the package carbon-components-svelte. When I use a component from their package, outros.c.push was sometimes undefined.

The solution from ulvido work well for me at least.

same problem for me:
EDIT: temporary solution

...

-          outros.c.push(() => { // this push part gives the error
+          outros?.c?.push(() => { 

...

[ghost]

Ok, so I see a pattern to hone in on: I can tell that some of these errors are with routers, SPA routers specifically. For a router to transition between pages, it must use an {#if ...} conditional. In my app, this error is caused when I move from /about to /, and not vice versa; this is very strange as it should be happening both ways. I'm curious if any other devs are experiencing this.

@Conduitry let me know if this Svelte or router specific, please. Here are my dependencies relevant to the issue:

{
  "dependencies": {
    "svelte-router-spa": "^6.0.3"
  },
  "devDependencies": {
    "@symfony/webpack-encore": "^2.1.0",
    "svelte": "^3.39.0",
    "svelte-loader": "^3.1.2"
  }
}

My webpack config is for svelte-loader is as follows:

Encore.addLoader({
    test:/\.svelte$/,
    loader:'svelte-loader',
})