T
TanStack•2y ago
other-emerald

Router and Vite dynamic import issues

Hey team Problem - I'm trying to import route based code splitting, but apparently Vite has some issues with dynamic imports (see issue here - https://github.com/vitejs/vite/issues/11804). Occasionally, I'll get an error on a route like failed to dynamically fetch [component]. This appears to be a Vite specific issue, but my question issue is - how do I best protect against this error using Tanstack Router? One of the recommended solutions is to do the following (for React Router) - 
router.onError((error, to) => {
  if (error.message.includes('Failed to fetch dynamically imported module')) {
    window.location = to.fullPath
  }
})
router.onError((error, to) => {
  if (error.message.includes('Failed to fetch dynamically imported module')) {
    window.location = to.fullPath
  }
})
Is there a way to attach an error handler to all routes globally? I know each route has their own error handler, but our app has a significant amount of routes and I'd like to prevent the pattern in which each route needs duplicate error handling code. Additionally, according to the docs, each route's onError returns error: unknown but not a value for to (which makes sense because it's on a route level - the to would be the route. Any insight into how to handle these Vite dynmic import errors? Thanks kindly
GitHub
Issues · vitejs/vite
Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?