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

Question

We have a vanilla Vue/Vite setup and I'm receiving TypeError: Failed to fetch dynamically imported module on sentry logs.

It seems like the errors are correlated in time with new deployment to prod, although I don't have enough data to confirm. It doesn't happen on local and appears only on deployed code.
I've seen some similar questions for react's setups, but none with a satisfactory response.
I've also found a similar question regarding dynamically imported svgs, but our errors happen for full components.

The only place where we use dynamic imported components is on routing:

export const router = createRouter({
  history: routerHistory,
  strict: true,
  routes: [
    {
      path: '/',
      name: routes.homepage.name,
      component: () => import('@/views/Home.vue'),
      children: [
        {
          path: '/overview',
          name: routes.overview.name,
          component: () => import('@/views/Overview.vue'),
        },
        // other similar routes
      ],
    },
  ],
});

Our deps versions:

    "vue": "^3.0.9",
    "vue-router": "^4.0.5",
    "vite": "^2.0.5",

Any additional information on this issue and how to debug it would be much appreciated!

Answer 1

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