“TypeError: Failed to fetch dynamically imported module” on Vue/Vite vanilla setup

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:

1. You deploy the application
2. Your Home chunk has a link to /overview route, which would load Overview.abc123.js
3. Client visits your site
4. You make changes in your code, not necessarily to the Overview component itself, but maybe to some children components that Overview imports.
5. You deploy changes, and Overview is built with a different hash now – Overview.32ab1c.js
6. Client clicks on /overview link – gets the Failed to fetch dynamically imported module error, because Overview.abc123.js no longer exists

That is why the errors correlate with deployments. One way to fix it is to not use lazy loaded routes, but that’s not a great solution when you have many heavy routes – it will make your main bundle large