Cannot read property '$destroy' of undefined

[zeskysee]

Hi when I try using single-spa-svelte with svelte (3.0.0) & latest root config created (single-spa@5.1.1) from create-single-spa cli , shows the following error in console log:

entry file

import singleSpaSvelte from 'single-spa-svelte';
import myRootSvelteComponent from './main';

const svelteLifecycles = singleSpaSvelte({
    component: myRootSvelteComponent
});
export const bootstrap = svelteLifecycles.bootstrap;
export const mount = svelteLifecycles.mount;
export const unmount = svelteLifecycles.unmount;

App.svelte

<script>
        import { Router, Link, Route } from "svelte-routing";

    export let name;
    export let url = "";
</script>

<h1>Navbar {name}</h1>
<Router url="{url}">
  <nav>
    <Link to="/">Home</Link>
    <Link to="clients">Clients</Link>
  </nav>
</Router>

If getting the following error does it means it cannot destroy the component?

[zeskysee]

When switching URL app are not getting unload from the screen

[joeldenning]

single-spa attempts to automatically unmount an application if it fails to mount, as an attempt to clean it up. If that fails, it throws a second error, which in your case is the $destroy error.

The real problem is the first error opts.component is not a constructor. You can read more about it at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_constructor.

It appears that myRootSvelteComponent is not a function or class. The single-spa-svelte library creates a svelte component according to these docs, which involves calling new Component(options). The error appears to be that the component provided to single-spa-svelte is not actually a component.

To debug, I'd recommend console logging myRootSvelteComponent and seeing if it's a function or class. If not, that's the issue