"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

I had the exact same issue. In my case some routes worked and some didn't. The solution was relatively easy. I just restarted the dev server.

Answer 2

In my case the error was caused by not adding .vue extension to module name.

import MyComponent from 'components/MyComponent'

It worked in webpack setup, but with Vite file extension is required:

import MyComponent from 'components/MyComponent.vue'