TypeError: Failed to fetch dynamically imported module

Problem

Describe the bug Since switching to Vite we noticed a new production issue, where sometimes users are encountering an error if we deploy while they have an active session: > TypeError: Failed to fetch dynamically imported module I believe this is because if any code is modified in an area that Vite would turn into a dynamic module, then the file hash changes, however when they try to visit an area that would trigger the dynamic load, those files no longer exist so they hit the error message above. Quoting from https://stackoverflow.com/a/74057337/21061 > When you dynamically import a route/component, during build it creates a separate chunk. By default, chunk filenames are hashed according to their content – Overview.abc123.js. If you don't change the component code, the hash remains the same. If the component code changes, the hash changes too - Overview.32ab1c.js. This is great for caching. > > Now this is what happens when you get this error: > > - You deploy the application > - Your Home chunk has a link to /overview route, which would load Overview.abc123.js > - Client visits your site > - You make changes in your code, not necessarily to the Overview component itself, but maybe to some children components that Overview imports. > - You deploy changes, and Overview is built with a different hash now - Overview.32ab1c.js > - Client clicks on /overview link - gets the Failed to fetch dynamically imported module error, because Overview.abc123.js no longer exists > > T