Useful or not, from you.
svelte Route navigation deactivates Svelte apps async loading

Hi all,

I have created a very basic Sapper project that is supposed to load Svelte apps asynchronously at runtime (svelte v3.0.0 and sapper v0.26).

All works great when the Svelte apps (very basic Svelte template projects) are loaded async for the first time (they show up correctly in the Sapper host page). Unfortunately, subsequent navigation back and forth from and to the routes used to load the two sample apps will not dynamically load them anymore (no async requests are being made at all).

Apparently, this is not a Sapper issue because I can reproduce the same behaviour by using a different Svelte routing library like svelte-routing.

I couldn't set up a demo by using REPL, but I have created a very simple Sapper project on Github: sapper-dynamic-import.

Here is the code that loads the Svelte apps asynchronously:

<script context="module">
    export async function preload({ params, query }) {
        return { appName: params.app };
    }
</script>

<script>
    import { onMount } from 'svelte';

    let App;
    export let appName;

    onMount(() => {
        console.log('the component has mounted');
        loadApp();
    });

    async function loadApp() {  
        const app = `./Apps/${appName}/bundle.js`;
        ({ default: App } = await import(app));
    }    
</script>

<div id="AppHost">
    <svelte:component this={App}/>
</div>
That's a useful answer
Without any help

@mrkishi

There is no error related to the app loading (you can check by yourself when running the example in the repository I have created).

However, there is an error in console that happens all the time (even when the apps are loading successfully): GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED

Additionally, if I navigate manually to the route (i.e. from the browser's address bar) the apps are correctly loaded.

Best!