[Bug]: lazy loaded module error in nested router is catched only by the parent route with the * wildcard, not by the errorElement
in the nested router
#11404
Labels
errorElement
in the nested router
#11404
What version of React Router are you using?
6.22.3
Steps to Reproduce
I use microfrontend architecture in my app. I have a
RouteProvider
in my host app with thecreateBrowserRouter
router routes which have an*
wildcard in theirpath
:host-app.router.ts
In my remote Settings app I also have a routing but I cannot use
RouterProvider
there because there must be only one router provider per whole app. Also, in my remote Settings app I cannot usecreateBrowserRouter
router, because such a router needs its own provider, but as I mentioned previously, I cannot use nested router providers.So in remote Settings app I use just
<Routes>
(without<BrowserRouter>
component):remote-settings-app.router.ts
So, my RemoteRouter is made with the
<Routes>
and is located inside theHostRouter
which is made with thecreateBrowserRouter
.In order to remote Settings app router work I use a
*
wildcard in my host app/settings/*
route — now my microfrontend app is displaying on/settings/notifications
page correctly.I made my Transactions app broken by purpose —
remoteEntry.js
file just does not exist on the server, so lazy loaded module throws an 404 error: Failed to fetch dynamically imported module.So, the problem is now if I navigate to the
/settings/transactions
page the error will be displayed in myHostErrorLayout
component — myRemoteErrorLayout
inRemoteRouter
will be just skipped and not catching an error.Expected Behavior
Error bubbling should respect every route tree
errorElement
on any route tree level.Actual Behavior
Error bubbling respects only root route's
errorElement
if the route has*
wildcard.The text was updated successfully, but these errors were encountered: