svelte: Nested async components error when switching components

If I understand what everyone here means by “dynamic components” as “components built from a separate Svelte project, of which the final JS file is dynamically loaded” then the reason for these errors is because Svelte bundles with its own copy of the runtime internals (or rather, by default that’s what bundlers do with Svelte).

I’m making this assumption because otherwise you would just download the .svelte files and include them in your project like usual, in which case they would get bundled with the same internals as the rest of your project anyway, and the OP gave the example of import()ing a .js file.

Unfortunately if this is the case then any suggested fixes relating to guards etc. only half-fix the problem because there are still incorrect state tracking variables lying around which could cause more problems later on, even if no errors are thrown.

The runtime internals use module level variables to track state, so when a component from one project calls a component from another project and both use their own copies of the internals things start going wrong due to the state tracking variables not being shared.

I started an issue specifically about this here: https://github.com/sveltejs/svelte/issues/3671

In the end @halfnelson came up with a solution where the pre-built component should declare at least the svelte/internal imports as globals (rollup) or externals (webpack).

You can see that comment and my comment afterwards stating what I did here: https://github.com/sveltejs/svelte/issues/3671#issuecomment-541277465

If this is the problem that’s being discussed here then it would seem that projects distributing pre-built Svelte components should set their bundles to be built expecting at least the svelte/internal import to be provided as a global somewhere.

In the case where they want both the option to be imported into an existing Svelte project or be used as a standalone component in a non-svelte project (in this case they would need their own internals) then they could set up the build to use globals if they exist or their own copy if they don’t exist. I haven’t looked into how to go about doing that myself though.

If that’s not possible then a project distributing pre-built Svelte components could provide two builds quite easily; one that contains a copy of the internals and one that expects them to be available somewhere in the environment, like as a global. The one that expects the internals to be available somewhere in the environment is the one that would be used inside a Svelte component built as a separate project.

The only downside to this is that if the components were built using different versions of Svelte then it’s possible that the expected functionality of each component will go out of sync due to API changes. This is one of the trade offs you have to make when you decide to include a pre-built component into your project anyway though.

Hey guys, any update on that? I’m experiencing the same problem with simple components in an if-else block.

This is definitely a bug. Here is how I ended up having this problem.

1. I have compiled Car application that via props takes Engine component and renders this component using <svelte:component this={engine} /> syntax.
2. My friend makes Engine component bundle and I include this bundle via browser script tags and pass into Car application as prop.
3. It works if Engine does not include any other svelte components, but throws errors described by others if Engine has at least one other component included.

I use svelte 3.0.0 and bundle with rollup.

//My friends Engine.svelte that causes problems 👎
<script>
	import EnginePart1 from './EnginePart1.svelte';
	import EnginePart2 from './EnginePart2.svelte';
	import EnginePart3 from './EnginePart3.svelte';
</script>

<EnginePart1 />

//My friends Engine.svelte that works
<script>
	import EnginePart1 from './EnginePart1.svelte';
	import EnginePart2 from './EnginePart2.svelte';
	import EnginePart3 from './EnginePart3.svelte';
</script>

I'm engine without parts. 👍

And here is an Engine app. Notice condition is part of an error scenario.

<script>
    export let engine;

    let status = 'engine';

    const toggleInfo = () => {
        if (status == 'engine') {
            status = 'something else';
        } else {
            status = 'engine';
        }
    }
</script>

<button on:click|preventDefault={toggleInfo}>Toggle engine</button>

{#if status == 'engine'}        
    <svelte:component this={engine}></svelte:component>
{:else}
    something else
{/if}

Here is how they meet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car App</title>
    <link href="bundle.css" rel="stylesheet" />
</head>
<body>
    <div id="parking-lot"></div>
 
    <script src="bundle.js"></script>
    <script src="Engine/bundle.js"></script>
    <script>
        new Car({
            target: document.querySelector('#parking-lot'),
            props: {
                engine: Engine
            }
        })
    </script>
</body>
</html>

This time I get an error TypeError: (void 0) is undefined

But same structural configuration caused TypeError: Cannot read property ‘c’ of undefined error in other app I’m building.

does anyone have a solution to this?

I’m not using anything async and I’m getting this error.

I wrote this patch:

diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index ed23d3c1..7098afbd 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -53,13 +53,15 @@ export function transition_out(block, local: 0 | 1, detach: 0 | 1, callback) {
 		if (outroing.has(block)) return;
 		outroing.add(block);
 
-		outros.c.push(() => {
-			outroing.delete(block);
-			if (callback) {
-				if (detach) block.d(1);
-				callback();
-			}
-		});
+		if (outros !== undefined) {
+			outros.c.push(() => {
+				outroing.delete(block);
+				if (callback) {
+					if (detach) block.d(1);
+					callback();
+				}
+			});
+		}
 
 		block.o(local);
 	}

Before accessing outros.c we first check if outros exists. By default it is undefined.

Alternative solutions:

• call group_outros before transition_out
• call check_outros before transition_out

Both create the outros object.

If someone in the know wants to chime in with the appropriate solution. I will create the PR.

I have the same issue using sveltestrap (bootstrap4) components which are imported. In this case areas is array which is dynamically updated via fetch, on user input.

<Dropdown inNavbar=true {isOpen} toggle={() => (isOpen = !isOpen)}>
    <DropdownMenu >
        {#each areas as area}
            <DropdownItem>{area.az_name}</DropdownItem>
        {/each}
    </DropdownMenu>
</Dropdown>

The first time it loads fine and the dropdown list is loaded properly any next update fails. Stack trace

index.mjs:649 Uncaught (in promise) TypeError: Cannot read property 'c' of undefined
    at is (index.mjs:649)
    at Object.o (DropdownItem.svelte:52)
    at transition_out (index.mjs:684)
    at Object.o (App.svelte:60)
    at transition_out (index.mjs:684)
    at out (App.svelte:59)
    at Object.p (App.svelte:59)
    at Object.p (DropdownMenu.svelte:26)
    at ls (index.mjs:604)
    at es (index.mjs:578)

Debugging with source map it leads to here:

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