bug: Failed to fetch dynamically imported module after internet reconnect

[AndersRobstad]

Describe the bug

If the user encounters an error while loading a page, for example due to missing internet connection, the page keeps erroring even when the user has regained internet connection. This makes it so that the user has to refresh the page in order to access the page since its broken in their current application state.

This issue causes the application to always throw the TypeError: Failed to fetch dynamically imported module: error every time the user tries to navigate to the broken route. The only way we have managed to fix the issue is by refreshing the browser tab

Reproduction

Steps to reproduce:

1. Load the application
2. Turn off wifi
3. Click the visit route 1 link such that it errors due to missing internet connection
4. Navigate back to the root page and enable wifi again
5. Wait until internet connection has been established and click the route 1 link again
6. See that the page still errors

This behavior can be tested on this deployed application here which was deployed from this minimal reproduction. A gif showing how I'm able to trigger the error can be seen below

We have not been able to reproduce the bug without having it deployed since this reproduction relies on internet connection and remote requests.

Skjermopptak.2025-03-31.kl.12.12.09.mov

Minimal repro: https://github.com/AndersRobstad/svelte-network-error
Deployed application: https://svelte-network-error.vercel.app/

Logs

`GET` https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js net::ERR_INTERNET_DISCONNECTED
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`GET` https://svelte-network-error.vercel.app/_app/version.json net::ERR_INTERNET_DISCONNECTED
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`GET` https://svelte-network-error.vercel.app/_app/version.json net::ERR_INTERNET_DISCONNECTED
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js
`TypeError`: Failed to fetch dynamically imported module: https://svelte-network-error.vercel.app/_app/immutable/nodes/3.C8tI2mkf.js

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M2 Pro
    Memory: 99.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    pnpm: 10.6.5 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
  Browsers:
    Brave Browser: 133.1.75.178
    Chrome: 134.0.6998.166
    Edge: 134.0.3124.95
    Safari: 18.3.1
  npmPackages:
    @sveltejs/adapter-auto: ^4.0.0 => 4.0.0
    @sveltejs/kit: ^2.16.0 => 2.20.2
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3
    svelte: ^5.0.0 => 5.25.3
    vite: ^6.0.0 => 6.2.3

Severity

serious, but I can work around it

Additional Information

No response

[dummdidumm]

Unfortunately there's not much we can do, this (for some insane reason) is the expected behavior for dynamic imports according to the spec - the result of the import is cached, even if it was unsuccessful. There's talks to change that but that might take a while.

Until then I'm not sure how we could mitigate this. One option would be to use query parameters to break the cache, but I'm not sure right now how much of this is Vite and if we can hook into this.

[MathiasWP]

I guess a solution is to use the "single" or "inline" bundleStrategy

[MathiasWP]

Unfortunately there's not much we can do, this (for some insane reason) is the expected behavior for dynamic imports according to the spec - the result of the import is cached, even if it was unsuccessful. There's talks to change that but that might take a while.

Until then I'm not sure how we could mitigate this. One option would be to use query parameters to break the cache, but I'm not sure right now how much of this is Vite and if we can hook into this.

Would it be possible for SvelteKit/Vite to detect that a dynamic import failed, and then add the query parameter to break the cache? Or would cache have to be broken every time?

[MathiasWP]

After changing our bundleStrategy to "inline" we have stopped seeing these errors. The downside is that this has a big impact on initial load time, but we have decided that it's better to have our app load as expected.

@dummdidumm do you know if loading JS scripts without type="module" also has the same caching of unsuccessful responses? If not, would it then be possible to have a bundleStrategy that splits the code without using type="module"?

I've looked at how Figma loads their JS, and based on the source code of their HTML it seems that they do not use type="module", and load their JS separately through "basic" script tags. It would be great to have a bundle strategy that avoids the current pitfall of type="module" and at the same time has a better initial load than bundling everything inline.