Invariant failed: Cannot find parent match for matchId error
I have been doing some testing of the start/router with some fairly complex setups. I have managed to isolate what seems to be a minimal repro that results in this bug:
I have several setups that explore this bug in this repo: https://github.com/astralarya/tanstack-start-route-invariant-bug
The
* __root.tsx
* _pathless_layout.tsx
* _pathless_layout
* index.tsx
* _nested_layout.tsx
* _nested_layout
* nested_path.tsx
This route pattern is identical in all the scenarios described here. The
There are a few other branches:
*
*
The way to reproduce this bug is to navigate to
Here is the full trace of the error:
If I were to speculate, I think it might have something to do with the use of
Funny enough, the app (even the crazy pixi-three merged fiber root version) works fine when navigating back and forth. I just mostly am wondering why this exception is being thrown / uncaught.
tiny-invariant.js:12 Uncaught Error: Invariant failed: Could not find parent match for matchId "/_pathless_layout/_nested_layout/"This only occurs in what is a fairly unconventional setup, but I have created a number of test cases. There are a lot of reasons why this could be happening, and I am certain that the blame does not necessarily lay at Tanstack's feet, but it is something that may be of interest, and if anyone had some insights, it would be much appreciated.
I have several setups that explore this bug in this repo: https://github.com/astralarya/tanstack-start-route-invariant-bug
The
main* __root.tsx
* _pathless_layout.tsx
* _pathless_layout
* index.tsx
* _nested_layout.tsx
* _nested_layout
* nested_path.tsx
This route pattern is identical in all the scenarios described here. The
_pathless_layout.tsx provides navigation links to //nested_path.There are a few other branches:
*
r3f, pixi. These use @react-three/fiber and @pixi/react respectively. In these, _pathless_layout.tsx contains a canvas / fiber root and has ssr: false. nested_path.tsx contains some content within that fiber root. These work as expected.*
pixi-three merges both canvases, creating a Pixi React fiber root and a React Three fiber root within. There is a bit more going on here with tunnel-rat and its-fine being used. However, one thing to note is that its-fine is part of the base React Three Fiber package.The way to reproduce this bug is to navigate to
/nested_path and then click the link in the top nav to go to /mainr3f, or pixi setups. However, in the pixi-three setup, you get the invariant matchId not found error above. Weirdly, the app seems to function perfectly despite this uncaught exception.Here is the full trace of the error:
Uncaught Error: Invariant failed: Could not find parent match for matchId "/_pathless_layout/_nested_layout/"
at invariant (tiny-invariant.js:12:11)
at Object.select (Match.tsx:328:7)
at useRouterState.tsx:67:19
at memoizedSelector (with-selector.development.js:47:30)
at with-selector.development.js:71:22
at updateSyncExternalStore (react-reconciler.development.js:4423:31)
at Object.useSyncExternalStore (react-reconciler.development.js:15101:16)
at exports.useSyncExternalStore (react.development.js:1270:34)
at exports.useSyncExternalStoreWithSelector (with-selector.development.js:82:19)
at useStore (index.ts:31:17)
If I were to speculate, I think it might have something to do with the use of
useContextBridge() from its-fine (https://github.com/pmndrs/its-fine?tab=readme-ov-file#useContextBridge). However, base React Three Fiber also uses the same context bridge.Funny enough, the app (even the crazy pixi-three merged fiber root version) works fine when navigating back and forth. I just mostly am wondering why this exception is being thrown / uncaught.
