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.
main branch uses only Tanstack/Vite. The basic setup is thus:_pathless_layout.tsx provides navigation links to / and /nested_path.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./nested_path and then click the link in the top nav to go to /. Note, this does not result in any errors in the main, r3f, 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.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)
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.https://x.com/powersync_/status/2010721010006552775?s=20
dry-scarlet · 2mo ago
You can now submit your website/app/project to http://TanStack.com 's new showcase and have it seen by the TanStack community! - Global showcase browser - Per-library filters - Category filters Submit here: https://tanstack.com/showcase/submit View all here: https://tanstack.com/showcase
dry-scarlet · 3mo ago
TanStack AI Alpha 2 is here! 🖼️ Image, video, audio, speech, transcription, structured output 📦 Split adapters = smaller bundles, faster dev/contributions, easier 🎄 Fully tree shakable adapters ✨ Cleaner, flattened, fully type-safe APIs https://tanstack.com/blog/tanstack-ai-alpha-2
dry-scarlet · 3mo ago