Failed to fetch dynamically imported module

Notice I wrapped up the below cache busting retry logic into an independent library of its own, so you can replace your import('./my-module.js') with import {dynamicImportWithRetry} from '@fatso83/retry-dynamic-import' ... const myModule = await dynamicImportWithRetry( () => import('./my-module.js')) This error is expected, not mysterious and by design (HTML spec): the HTML spec demands that failed dynamic imports are being cached. Here is the corresponding Chromium unit test that ensures it actually works like this. So what this means is that should a request fail for any number of reasons (many of which are listed above), your SPA is stuck between a rock and a hard place. This goes for any framework, library or other approach using dynamic imports. It is not React specific. It is unfortunately not always so easy to automatically solve for the users affected, as for some browsers it will sticky - both releading the page and restarting the browser will use the resolved network failure. Per May 2023 this happens in Chrome, but not so with Safari and Firefox where reloading will re-fetch failed dynamic imports as well (at least in my testing). Here's some light reading for background: Section of the spec https://tc39.es/ecma262/#sec-HostLoadImportedModule https://github.com/whatwg/html/issues/6768 https://github.com/tc39/proposal-dynamic-import/issues/80 https://bugs.chromium.org/p/chromium/issues/detail?id=1195405 You can reproduce and play with this using Charles Proxy by setting up TLS proxying and Rewriting the status code based on path. Here is one such example: . When verifying the fix I found using the Breakpoints feature of Charles Proxy very convenient: manually failing it on the first hit, then allowing it on subsequent requests. One of the other answers hint to using workaround related to React.lazy(). This the approach I currently went for: replacing React.lazy() calls with a wrapper function that does retry. Some approaches work better than others: a simple reload of the app (page) will not work (React LazyLoad gist for the reasons mentioned above cache busting will work An implementation of a simple cache-busting dynamic import wrapper can be found in this article which also a repo for playing with it. Nothing fancy (a more universal, cross-browser approach I came up with later is available in linked library). export const lazyWithRetries: typeof React.lazy = (importer) => { const retryImport = async () => { try { return await importer(); } catch (error: any) { // retry 5 times with 2 second delay and backoff factor of 2 (2, 4, 8, 16, 32 seconds) for (let i = 0; i < 5; i++) { await new Promise((resolve) => setTimeout(resolve, 1000 * 2 ** i)); // this assumes that the exception will contain this specific text with the url of the module // if not, the url will not be able to parse and we'll get an error on that // eg. "Failed to fetch dynamically imported module: https://example.com/assets/Home.tsx" const url = new URL( error.message .replace("Failed to fetch dynamically imported module: ", "") .trim() ); // add a timestamp to the url to force a reload the module (and not use the cached version - cache busting) url.searchParams.set("t", `${+new Date()}`); try { return await import(url.href); } catch (e) { console.log("retrying import"); } } throw error; } }; return React.lazy(retryImport); }; Note: The above approach matches on the exact error message produced by Chromium based browsers (Edge, Chrome, etc), so it does not work in Firefox, Safari, etc. In the library I linked to above I found another approach that should work across browsers to find the module name, but it makes some assumptions that might break in some environments.