{"record":{"id":"1a99fd9423a7218c","repo":"vuejs/vue-router","slug":"uncaught-error-during-route-navigation","errorCode":null,"errorMessage":"uncaught error during route navigation:","messagePattern":"uncaught error during route navigation:","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/history/base.js","lineNumber":151,"sourceCode":"      }\n    )\n  }\n\n  confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {\n    const current = this.current\n    this.pending = route\n    const abort = err => {\n      // changed after adding errors with\n      // https://github.com/vuejs/vue-router/pull/3047 before that change,\n      // redirect and aborted navigation would produce an err == null\n      if (!isNavigationFailure(err) && isError(err)) {\n        if (this.errorCbs.length) {\n          this.errorCbs.forEach(cb => {\n            cb(err)\n          })\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn(false, 'uncaught error during route navigation:')\n          }\n          console.error(err)\n        }\n      }\n      onAbort && onAbort(err)\n    }\n    const lastRouteIndex = route.matched.length - 1\n    const lastCurrentIndex = current.matched.length - 1\n    if (\n      isSameRoute(route, current) &&\n      // in the case the route map has been dynamically appended to\n      lastRouteIndex === lastCurrentIndex &&\n      route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]\n    ) {\n      this.ensureURL()\n      if (route.hash) {\n        handleScroll(this.router, current, route, false)\n      }","sourceCodeStart":133,"sourceCodeEnd":169,"githubUrl":"https://github.com/vuejs/vue-router/blob/680ccc68c506cca9be6207745043245d61fa715a/src/history/base.js#L133-L169","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","solutions":["Check the 'reason' appended to the message — usually a failed chunk fetch; fix the underlying network/deploy issue.","Add router.onError to catch it and hard-reload so the browser fetches fresh chunks.","Verify the async import path is correct and the chunk is emitted by the bundler.","For Vue async components, configure error/errorHandler/timeout on the factory to control failure behavior."],"exampleFix":"// before\n{ path: '/admin', component: () => import('@/views/Admin') }\n// after (with retry fallback)\nfunction load (fn) {\n  return () => fn().catch(err => {\n    window.location.reload()\n    throw err\n  })\n}\n{ path: '/admin', component: load(() => import('@/views/Admin')) }","handlingStrategy":"try-catch","validationCode":null,"typeGuard":"function isNavigationError (err) {\n  return err instanceof Error && /navigation|chunk/i.test(err.message)\n}","tryCatchPattern":"router.onError(err => {\n  console.error('uncaught error during route navigation:', err)\n  if (/Loading chunk|ChunkLoadError/i.test(String(err))) {\n    window.location.reload() // recover from stale chunks after deploys\n  }\n})","preventionTips":["Always register router.onError in production apps.","Detect and recover from chunk-load errors with a page reload.","Wrap async logic inside navigation guards in try/catch and call next(err) deliberately.","Test navigation flows after deployments where hashed chunk names change."],"tags":["vue-router","async-component","code-splitting","chunk-load"],"backgroundTag":"async-component-resolve-failed","analyzedSha":"680ccc68c506cca9be6207745043245d61fa715a","analyzedAt":"2026-09-02T19:19:01.204Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}