Uncaught undefined in in the <MatchInnerImpl> component

[ryanagillie]

Which project does this relate to?

Router

Describe the bug

This is a bit of a complicated one, but I think I've found a race condition where an undefined is thrown inside the <MatchInnerImpl> component after a beforeLoad redirect that causes the routes to fail to display.

It only fails on first load, and usually a refresh or HMR will fix it.

I only wrote this because some of these exact conditions were met in a private work repository and it took me 2 hours to create a stable reproduction.

Stack Trace

defaultOnUncaughtError          @ react-dom_client.js?v=be4189c8:5256
logUncaughtError                @ react-dom_client.js?v=be4189c8:5286
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
lane.callback                   @ react-dom_client.js?v=be4189c8:5314
callCallback                    @ react-dom_client.js?v=be4189c8:4094
commitCallbacks                 @ react-dom_client.js?v=be4189c8:4102
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
commitLayoutEffectOnFiber       @ react-dom_client.js?v=be4189c8:6985
flushLayoutEffects              @ react-dom_client.js?v=be4189c8:8670
commitRoot                      @ react-dom_client.js?v=be4189c8:8583
commitRootWhenReady             @ react-dom_client.js?v=be4189c8:8078
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:8050
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<MatchInnerImpl>
exports.jsx                     @ react_jsx-runtime.js?v=eeebbf31:192
MatchView                       @ @tanstack_react-rout….js?v=9b2a07b8:6384
react_stack_bottom_frame        @ react-dom_client.js?v=be4189c8:12867
renderWithHooksAgain            @ react-dom_client.js?v=be4189c8:4267
renderWithHooks                 @ react-dom_client.js?v=be4189c8:4218
updateFunctionComponent         @ react-dom_client.js?v=be4189c8:5568
beginWork                       @ react-dom_client.js?v=be4189c8:6139
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
performUnitOfWork               @ react-dom_client.js?v=be4189c8:8428
workLoopSync                    @ react-dom_client.js?v=be4189c8:8324
renderRootSync                  @ react-dom_client.js?v=be4189c8:8308
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:7993
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<MatchView>
exports.jsx                     @ react_jsx-runtime.js?v=eeebbf31:192
MatchImpl                       @ @tanstack_react-rout….js?v=9b2a07b8:6328
react_stack_bottom_frame        @ react-dom_client.js?v=be4189c8:12867
renderWithHooksAgain            @ react-dom_client.js?v=be4189c8:4267
renderWithHooks                 @ react-dom_client.js?v=be4189c8:4218
updateFunctionComponent         @ react-dom_client.js?v=be4189c8:5568
updateSimpleMemoComponent       @ react-dom_client.js?v=be4189c8:5431
updateMemoComponent             @ react-dom_client.js?v=be4189c8:5406
beginWork                       @ react-dom_client.js?v=be4189c8:6209
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
performUnitOfWork               @ react-dom_client.js?v=be4189c8:8428
workLoopSync                    @ react-dom_client.js?v=be4189c8:8324
renderRootSync                  @ react-dom_client.js?v=be4189c8:8308
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:7993
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<MatchImpl>
exports.jsx                     @ react_jsx-runtime.js?v=eeebbf31:192
MatchesInner                    @ @tanstack_react-rout….js?v=9b2a07b8:6671
react_stack_bottom_frame        @ react-dom_client.js?v=be4189c8:12867
renderWithHooksAgain            @ react-dom_client.js?v=be4189c8:4267
renderWithHooks                 @ react-dom_client.js?v=be4189c8:4218
updateFunctionComponent         @ react-dom_client.js?v=be4189c8:5568
beginWork                       @ react-dom_client.js?v=be4189c8:6139
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
performUnitOfWork               @ react-dom_client.js?v=be4189c8:8428
workLoopSync                    @ react-dom_client.js?v=be4189c8:8324
renderRootSync                  @ react-dom_client.js?v=be4189c8:8308
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:7993
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<MatchesInner>
exports.jsx                     @ react_jsx-runtime.js?v=eeebbf31:192
Matches                         @ @tanstack_react-rout….js?v=9b2a07b8:6662
react_stack_bottom_frame        @ react-dom_client.js?v=be4189c8:12867
renderWithHooksAgain            @ react-dom_client.js?v=be4189c8:4267
renderWithHooks                 @ react-dom_client.js?v=be4189c8:4218
updateFunctionComponent         @ react-dom_client.js?v=be4189c8:5568
beginWork                       @ react-dom_client.js?v=be4189c8:6139
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
performUnitOfWork               @ react-dom_client.js?v=be4189c8:8428
workLoopSync                    @ react-dom_client.js?v=be4189c8:8324
renderRootSync                  @ react-dom_client.js?v=be4189c8:8308
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<Matches>
exports.jsx                     @ react_jsx-runtime.js?v=eeebbf31:192
RouterProvider                  @ @tanstack_react-rout….js?v=9b2a07b8:6848
react_stack_bottom_frame        @ react-dom_client.js?v=be4189c8:12867
renderWithHooksAgain            @ react-dom_client.js?v=be4189c8:4267
renderWithHooks                 @ react-dom_client.js?v=be4189c8:4218
updateFunctionComponent         @ react-dom_client.js?v=be4189c8:5568
beginWork                       @ react-dom_client.js?v=be4189c8:6139
runWithFiberInDEV               @ react-dom_client.js?v=be4189c8:850
performUnitOfWork               @ react-dom_client.js?v=be4189c8:8428
workLoopSync                    @ react-dom_client.js?v=be4189c8:8324
renderRootSync                  @ react-dom_client.js?v=be4189c8:8308
performWorkOnRoot               @ react-dom_client.js?v=be4189c8:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=be4189c8:9058
performWorkUntilDeadline        @ react-dom_client.js?v=be4189c8:35

<RouterProvider>
exports.jsxDEV                  @ react_jsx-dev-runtime.js?v=eeebbf31:192
(anonymous)                     @ main.tsx:59

Complete minimal reproducer

https://stackblitz.com/edit/github-udgl2qav

Steps to Reproduce the Bug

1. Open link
2. Page fails to load
3. Open console
4. Check error stack trace

Expected behavior

Should not be throwing an undefined and fail to render the page

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.170.5
• OS: Any
• Browser: Chrome
• Browser Version: 148.0.7778.168
• Bundler: vite
• Bundler Version: 8.0.13

Additional context

No response

[codeart1st]

#7120