Using zod `.default` in `validateSearch` causes the route to error out and parents to miss context
I've been able to narrow down some errors I've been seeing in my Tanstack Router app. When using
.default in my zod search params schema inside validateSearch, the page will error out. The cause of this error is a parent high up the tree having mismatched context, which I think is a hydration error similar to what is being described in a related issue here.
Notably, this only happens on one top level tree in my app. For example, site.com/admin/* works fine, but using validateSearch anywhere in site.com/user/* breaks.
/user will be missing the context from the beforeLoad in its context, and console logging it shows only the context from the _root.tsx component.GitHub
TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
5 Replies
genetic-orangeOP•4w ago
One thing to add -> when navigating to the affected links in the app, things work fine. The issue occurs when the page is refreshed or navigated to manually in the browser URL
foreign-sapphire•4w ago
are you using SSR? can you please provide a complete reproducer ?
genetic-orangeOP•4w ago
No SSR
This is happening in our companies codebase. What would be the best way to share minimal snippets for reproduction?
foreign-sapphire•4w ago
you mentioned hydration error
without SSR there is no hydration though
ideally just fork one of the existing stackblitz router examples
genetic-orangeOP•4w ago
Ah, that is what I picked up as a possibility from the existing issue.
Ignoring the hydration error part, simply adding
.default to a nested routes validateSearch zod schema is causing the error component to be triggered in the root, because context values higher up the parent tree are returning undefined
But commenting out .default makes everything work as expected