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?