The explanation provided in the accepted answer sheds light on when this error is triggered, but falls short in offering a viable solution.

To tackle this issue, I implemented an error handler within the router. This error handler ensures that upon encountering this error (specifically after deploying a new version of the app), the subsequent route change triggers a hard reload of the page instead of dynamically loading the modules. Here's what the code snippet looks like:

router.onError((error, to) => {
  if (error.message.includes('Failed to fetch dynamically imported module') || error.message.includes("Importing a module script failed")) {
    window.location = to.fullPath
  }
})

In this context, router refers to your vue-router instance.

The reason for my issue was forgetting to include the .vue extension in the module name.

import MyComponent from 'components/MyComponent'

Everything was fine with webpack, but Vite demands that the file extension be specified:

import MyComponent from 'components/MyComponent.vue'

Dealing with a similar problem, I found that certain routes were functioning while others were not. A simple fix resolved the issue - restarting the development server did the trick.

Although I found Wouter Sioen's solution to be effective, a new issue arose for me following the implementation of his fix. Whenever there is a chunkLoad error, I would receive an error message stating "Cannot read properties of undefined (reading 'fullPath')." To address this, I modified the solution as follows:

router.onError((error, destination) => {
  if (
    error.message.includes('Failed to fetch dynamically imported module') ||
    error.message.includes('Importing a module script failed')
  ) {
    if (!destination?.fullPath) {
      window.location.reload();
    } else {
      window.location = destination.fullPath;
    }
  }

I found that the issue was resolved by clearing the cache and .vite files before restarting the server.

# Stop your development server first
rm -rf node_modules/.cache node_modules/.vite;
# Start the server again
npm run dev

Similar to my experience, I encountered issues with my Quasar setup working on the main page but not on dynamically loaded pages.

To address this issue:

I made a simple adjustment by changing import('../pages/TestPage.vue') in the route file to

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

Here is a more detailed explanation:

Since I didn't anticipate having too many pages and preferred a single bundle without dynamic loading, I decided to statically import every page I needed.

In my routes.ts file, I imported all the necessary pages:

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

Then, I included them in my routes as static imports:

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: 'test', component: () => TestPage },
      { path: '', component: () => IndexPage }
  ],
  },
  // Make sure to keep this section last,
  // or you can remove it altogether
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

Just had a similar experience myself. The issue arose from having an empty href attribute within an anchor tag: <a href="" @click="goToRoute">. To resolve this, you can either eliminate the href altogether or consider switching the anchor tag to a different element like a button. Please feel free to reach out if you need further assistance.

If you're like me and stumbled upon this article seeking a solution, Vite has now introduced a new event:

"vite:preloadError"

Here's an example of how to use it:

window.addEventListener('vite:preloadError', (event) => {
  window.location.reload() // you can refresh the page here
})

Check out the documentation.

This feature was included in version 4.4 through this commit. I wasn't aware of it initially, so I had to update my vite package.

The issue arose when I mistakenly named my component as "VIewerPage.vue" with an uppercase "I", which was hard to spot at first glance. This error occurred because I referenced it as ViewerPage.vue in my router code, leading to the same problem.

router.handleErrors((error, destination) => {
  if (error.message.contains('Error loading dynamic module')) {
    window.location = destination.URL
  }
})

In my case, I encountered a problem with an outdated import statement in the current page component file. Once I removed this import, the issue was resolved.

import NonexistingComp from '/components/NonExistingComp.vue';

Additionally, there was an error message displayed in my terminal:

The attempt to load url /components/NonExistingComp.vue (resolved id: /components/NonExistingComp.vue) in /components/PageComponent.vue failed. Is the file present?

The issue I encountered was due to omitting the .jsx extension in a file name, when .jsx was actually required as the extension.

For instance, rather than using InboxScreen.stories.js

the correct format is InboxScreen.stories.jsx

After taking into consideration the explanations from @domnantas, along with the solutions provided by @Sioen and @Giedrius,

I made sure to eliminate any potential infinite redirects.

router.onError((error) => {
  console.error('router.onError', error)

  const isDeployError =
    error.message.includes('Failed to fetch dynamically imported module') ||
    error.message.includes('Importing a module script failed')

  if (isDeployError) errorReload(`Error during page load, ${error.message}`)
})

Additionally, here is the errorReload function:

export const errorReload = (error: string, retries = 1) => {
  // Obtain the current URL
  const urlString = window.location.href

  // Create a URL object
  const url = new URL(urlString)
  const errRetries = parseInt(url.searchParams.get('errRetries') || '0')
  if (errRetries >= retries) {
    window.history.replaceState(null, '', url.pathname)
    // useSnackbarStore().add(error, { reload: true })
    return
  }

  // Update or add the query parameter
  url.searchParams.set('errRetries', String(errRetries + 1))

  // Reload the page with the updated URL
  window.location.href = url.toString()
}

I encountered a similar problem with my Vue router, but it turned out the issue was not with the router itself. Instead, I found that the problem lied within my view code. After making some adjustments to the view, everything rendered correctly!

It appears that there is a change in file names after deployment. To ensure that the original file names are preserved, we can modify the Vite config as follows:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    //  ...other configurations
    rollupOptions: {
      // ...other options
      output: {
        assetFileNames: '[name].[ext]', // Preserve original file names
      }
    }
  }
});

By doing this, we can be certain that the necessary files will be correctly identified even after deployment. Here's what each placeholder represents:

• [name] - refers to the name of the file that we want to dynamically import
• [ext] - refers to the extension of the file that we want to dynamically import (in our case: *.vue)