Nested router in remote MFE not matching/switching; Cannot override current location object error

[jchand99]

Problem(s):

Contex: I have a setup with two routers, one in a host MFE, and one in a remote MFE, both using rsbuild and Module Federation 2.0.

1. When I navigate to the route that loads my remote MFE into the host, the host router correctly loads the remote MFE, but when I try to navigate within the remote, the url bar will change, but the router doesn't match any of the routes, and the component doesn't change from the fallback.

2. If I navigate off of the route that loaded my remote MFE, and then re-navigate to the route that loads my remote MFE, I get an error stating 'Cannot override the current location object. Clean the existing location first.'

What I would expect:

1. Once navigated to the route that loads the remote MFE, if I navigate within the remote, it's router changes the url, and the correct component loads instead of the fallback.

2. Once I navigate away from and back to the route that loads my remote MFE, I would expect that the old DynamicRoute component would be unmounted (because I navigated away) and re-mounted with a new instance of router and routes).

What I've tried:

1. I've tried setting the remote MFE route in the host's path to /svelte/* to try matching sub-routes, and it works at loading the correct remote component (Overview or Underview) if navigating through the browser's URL bar, but clicking the Links within the remote to navigate through the remote has no effect the component doesn't change, but the url does.
2. I've tried various configurations of the basePath in the remote:
   having no basePath on the router (didn't work)
   having the Link components not use a basePath (didn't work)
   having the Route components paths both use and not use a basePath prepended (didn't work)

Extra thoughts

This could be user error, due to lack of knowledge with this package. if so I apologize, I read the docs all last night, but it's possible I missed some key details. Screenshots and code snippets are below.

Package versions:
svelte: latest
rsbuild: latest
@svelte-router/core: 1.0.3

Screenshots

Click me to see screenshots

(Context for screenshot: What you're seeing is the remote MFE loaded (I've scrolled down the page to see it) and the remote MFE's router's RouterTrace table. At the very bottom of the page is the RouterTrace for the Host MFE's router)

Navigated to the route that loads my remote MFE and clicked the Overview link to navigate to the overview page. As you can see, the url path is correct, but the remote router doesn't match in the RouterTrace, and the component displayed is the Fallback. Clicking the Underview link has the same behavior: url changes to 'http://localhost:3000/svelte/underview, but remote router doesn't match, and the component displayed is fallback.

Screenshot of the error when navigating away from and back to the remote component with the nested router.

Code (Host):

<script lang="ts">
// Host App.svelte
    import Navbar from "./components/navbar.svelte";
    import { Router, Route, Fallback, RouterTrace, init } from '@svelte-router/core'
    import { onMount } from "svelte";
    import Home from "./pages/Home.svelte";
    import Documents from "./pages/Documents.svelte";
    import DynamicRoute from "./pages/DynamicRoute.svelte";

    let routerInitialized = $state(false);
    onMount(() => {
        init({});
        routerInitialized = true;
    });
</script>

<main>
        <div class="content">
            <h1>Rsbuild with Svelte</h1>
            <p>Start building amazing things with Rsbuild.</p>
            {#if routerInitialized}
                <Router id="host-router">
                    <Navbar />
                    <Route key="root" path="/">
                        <div>root</div>
                    </Route>
                    <Route key="home" path="/home">
                        <Home />
                    </Route>
                    <Route key="documents" path="/documents">
                        <Documents />
                    </Route>
                    <Route key="svelte" path="/svelte">
                        <DynamicRoute name="svelte" basePath="/svelte" entry="http://localhost:3001/mf-manifest.json" />
                    </Route>
                    <Fallback>
                        <div>fallback</div>
                    </Fallback>
                    <RouterTrace />
                </Router>
            {/if}
        </div>
</main>

<script lang="ts">
// Host - DynamicRoute.svelte
    import { loadRemote, registerRemotes } from "@module-federation/enhanced/runtime";
    import { type Component } from "svelte";

    let { name, basePath, entry } = $props();
    let RemoteComponent: Component | null = $state(null);

    $effect(() => {
        try {
            registerRemotes([
                {
                    name: `${name}-remote`,
                    entry: entry,
                },
            ]);

            loadRemote( `${name}-remote/App`).then((mod: any) => {
                if (!mod || !mod?.default) {
                    throw new Error("Remote module missing default component");
                }

                RemoteComponent = mod.default;
            });
        } catch (err) {
            console.log(err);
        }
    });
</script>

{#if RemoteComponent}
    <RemoteComponent {basePath}/>
{/if}

<script lang="ts">
// Host - Navbar.svelte
    import { Link } from "@svelte-router/core";
</script>

<div>
  <Link href="/home">Home</Link>
  <Link href="/documents">Documents</Link>
  <Link href="/svelte">Svelte Remote</Link>
</div>

Code (Remote):

<script lang="ts">
// Remote - App.svelte
  import { Router, Route, Fallback, RouterTrace, init } from '@svelte-router/core';
  import Overview from './pages/Overview.svelte';
  import Navbar from './components/Navbar.svelte';
  import { onMount } from 'svelte';
  import Underview from './pages/Underview.svelte';

  let { basePath } = $props();
  let routerInitialized = $state(false);
  onMount(() => {
    init({});
    routerInitialized = true;
  });
</script>

<main>
  <div class="content">
    <h1>Rsbuild with Svelte</h1>
    <p>Start building amazing things with Rsbuild.</p>
    <div>Hello from Remote!</div>
    {#if routerInitialized}
      <Router id="svelte-remote-router" {basePath}>
        <Navbar {basePath} />
        <Route key="overview" path="/overview">
          <Overview />
        </Route>
        <Route key="underview" path="/underview">
          <Underview />
        </Route>
        <Fallback>
          <div>Fallback</div>
        </Fallback>
        <RouterTrace />
      </Router>
    {/if}
  </div>
</main>

<script lang="ts">
// Remote - Navbar.svelte
  import { Link } from "@svelte-router/core";

  let { basePath } = $props();
</script>

<div>
  <Link href={basePath + "/overview"}>Overview</Link>
  <Link href={basePath + "/underview"}>Underview</Link>
</div>

[webJose]

Hello.

The init() function must only be called once. If you want to use onMount(), collect the return value (a cleanup function) and execute it when unmounting. That way the next mount will re-initialize and you won't have the problem about trying to override the current location object.

In the host MFE, make sure you use inexact path matching by using the rest pameter (/*), like this: <Route key="svelte" path="/svelte/*">. Route matching is always exact matching unless you add the rest parameter.

For the host, I recommend moving the call to init() to main.ts.

After doing this, I think it should work.

Docs References:

https://svelte-router.dev/docs/library-initialization
https://svelte-router.dev/docs/routing-with-components#About-the-Rest-Parameter

[jchand99]

Oh nice! I didn't realize there was a cleanup function returned from init, that solved the error of navigating away from and back to the remote, thanks!

I implemented your suggestion of using the path="/svelte/* and kept the Link hrefs the same (<Link href='/svelte/overview'>Overview</Link> and the Route paths the same <Route key="overview path='/overview'><Overview /></Route>, and the remote router does match the url http://localhost:3000/svelte/overview, but only if I navigate there directly from the URL bar in my browser. If I click the Link component in the Navbar it changes the url, but the router doesn't match the changed url and the component doesn't switch.

Thanks for the super quick and clear support! I appreciate it.

[webJose]

Ok. First, switching to Discussion.

Second: Can you post this in a repo so I can experiment?

Third: Could we chat live, maybe via Google Meet?

[jchand99]

Working on getting repos setup now and I'll send the links when those are ready.

[webJose]

I have done some changes. I know the root cause: You're externalizing the Svelte runtime. If you do this, you also need to externalize the router. Svelte reactivity only works under the same runtime. If you externalize the runtime but not the router, then it seems the router loses reactivity on the location object.

With the router externalized, you don't even need to call init() in the remote and the remote router even shows up as a child of the host router.

I'll make PR's for you to check it out. The only problem I have is that for some reason, the contents of the host App.svelte component duplicate. I don't get why.

[webJose]

A screenshot of what I see:

Item 1 shows that the router with id "host-router" and base path "/" is the parent of the router with ID "svelte-remote-router". I made the children button appear by adding trace: { routerHierarchy: true } to the init options. You'll see in the PR's.

[webJose]

Oh shoot! Is not a duplication of the host's App.svelte component. The remote component has the same text! LOL

Ok, I'm ready to submit the PR's. I'll do some cleanup first.

[jchand99]

Ah! The one thing I forgot to try! I've externalized your package and I can see exactly what you see in your screenshot now. Thank you very much for the near instant help!

I will note though, that I don't see any duplication of content from the host App.svelte like you describe, but it's possible I don't have it setup exactly like you do locally.

[webJose]

For completeness and posterity, the PR's:

jchand99/svelte-host-poc#1
jchand99/svelte-remote-poc#1

[jchand99]

Solution:

1. Cannot override current location error: init can only be run once, if you need to run it twice, make sure to deinit, from the returned function by calling init, first before calling init a second time!

2. MFE remote router not matching route properly: If you externalize the svelte runtime in your Module Federation configuration, make sure to externalize this package too! Once you do they should connect up nicely!