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

user_7105094 0
Viewed 27075

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!

vite vue.js webpack typescript javascript
4 Answers

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.

user_4757450

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'
user_27965930

My situation was similar. I found that my Quasar setup works fine on the initial page but not page that are loaded dynamically through an import('../pages/page.vue');.

Short response: I replaced import('../pages/TestPage.vue') in the middle of the route file by import TestPage from '../pages/TestPage.vue' at the top.

More detailed response:

In my situation I don't expect to have much pages, a single bundle with no dynamic loading is fine with me.

The solution is to import statically every page I need. In my routes.ts I import all the pages I need.

import IndexPage from '../pages/IndexPage.vue';
import TestPage from '../pages/TestPage.vue';

Then I serve them statically in my routes :

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: 'test', component: () => TestPage },
      { path: '', component: () => IndexPage }
  ],
  },
  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];
user_9647430

I had the same problem. I found that I had not started my project.

user_177198370
Related