vuejs/vue-router · error

uncaught error during route navigation:

Error message

uncaught error during route navigation:

What it means

When a route declares an async component (component: () => import(...)) and the promise rejects or times out, resolveComponents builds a message 'Failed to resolve async component <key>: <reason>' and passes it to the navigation as an error. In dev it also warns; the rejection aborts the navigation. This is the router's way of surfacing lazily-loaded route component failures.

Source

Thrown at src/history/base.js:151

      }
    )
  }

  confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
    const current = this.current
    this.pending = route
    const abort = err => {
      // changed after adding errors with
      // https://github.com/vuejs/vue-router/pull/3047 before that change,
      // redirect and aborted navigation would produce an err == null
      if (!isNavigationFailure(err) && isError(err)) {
        if (this.errorCbs.length) {
          this.errorCbs.forEach(cb => {
            cb(err)
          })
        } else {
          if (process.env.NODE_ENV !== 'production') {
            warn(false, 'uncaught error during route navigation:')
          }
          console.error(err)
        }
      }
      onAbort && onAbort(err)
    }
    const lastRouteIndex = route.matched.length - 1
    const lastCurrentIndex = current.matched.length - 1
    if (
      isSameRoute(route, current) &&
      // in the case the route map has been dynamically appended to
      lastRouteIndex === lastCurrentIndex &&
      route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
    ) {
      this.ensureURL()
      if (route.hash) {
        handleScroll(this.router, current, route, false)
      }

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Check the 'reason' appended to the message — usually a failed chunk fetch; fix the underlying network/deploy issue.
2. Add router.onError to catch it and hard-reload so the browser fetches fresh chunks.
3. Verify the async import path is correct and the chunk is emitted by the bundler.
4. For Vue async components, configure error/errorHandler/timeout on the factory to control failure behavior.

Example fix

// before
{ path: '/admin', component: () => import('@/views/Admin') }
// after (with retry fallback)
function load (fn) {
  return () => fn().catch(err => {
    window.location.reload()
    throw err
  })
}
{ path: '/admin', component: load(() => import('@/views/Admin')) }

function isNavigationError (err) {
  return err instanceof Error && /navigation|chunk/i.test(err.message)
}

router.onError(err => {
  console.error('uncaught error during route navigation:', err)
  if (/Loading chunk|ChunkLoadError/i.test(String(err))) {
    window.location.reload() // recover from stale chunks after deploys
  }
})

When it happens

Trigger: The dynamic import for a route component fails (network error, 404 on a chunk after redeploy, syntax error in the chunk), or the async component factory rejects/times out (Vue's async component error/timeout options).

Common situations: Code-split route chunks failing to load after a new deployment (hashed filenames change); offline/CDN issues; webpack/vite misconfiguration splitting route components; Vue async component timeout configured too low.

Related errors

• [vue-router]: Missing current instance. ${method}() must be
• [vue-router] ${message}
• Failed to resolve async component ${key}: ${reason}
• In Vue Router 4, the v-slot API will by default wrap its con
• <router-link> with to="${this.to}" is trying to use a scoped

AI-assisted analysis of vuejs/vue-router@680ccc68c5 (2026-09-02). Data as JSON: /api/errors/1a99fd9423a7218c. Report an issue: GitHub.