T
TanStack•6mo ago
grumpy-cyan

searchParam validation causing hydration error?

I'm hitting this weird error where my whole app was working fine- i have basically two subtrees, one with basically default Route configs, and one for the "app" where every route config sets ssr: false Then, I introduced searchParam validation at the highest layout of my spa tree using ArkType, and i'm getting hydration errors (they go away when i get rid of the arktype validation and just manually provide a cb to validateSearch I'll provide some more info in the followup post, but i'm not really even sure where to begin debugging this. i can try using it a different validation library and see what happens, but wondering if maybe i'm doing anything obviously wrong before i bother with that 
function LayoutComponent() {
  const search = Route.useSearch();
  return (
    <ProtectedLayoutProviders>
      <GlobalSidebar groups={data.groups} collapsible="icon" />
      <GlobalCommandBar searchParamKey={search.cmd} />
      <main className="w-full p-2 pl-1">
        <main className="w-full flex flex-col items-start gap-3 py-3 px-6 min-h-full relative">
          <header className="flex items-center gap-2 text-sm">
            <SidebarTrigger className="" />
            <Breadcrumbs />
          </header>
          <Outlet />
        </main>
      </main>
    </ProtectedLayoutProviders>
  );
}

export const GlobalSearchParams = type({
  cmd: '"open" | undefined',
  action: "'new-expense' | undefined",
});

export const CommandParam = GlobalSearchParams.get("cmd");
export const ActionParam = GlobalSearchParams.get("action");

export const Route = createFileRoute("/_protected")({
  ssr: false,
  component: LayoutComponent,
  validateSearch: GlobalSearchParams,
});
function LayoutComponent() {
  const search = Route.useSearch();
  return (
    <ProtectedLayoutProviders>
      <GlobalSidebar groups={data.groups} collapsible="icon" />
      <GlobalCommandBar searchParamKey={search.cmd} />
      <main className="w-full p-2 pl-1">
        <main className="w-full flex flex-col items-start gap-3 py-3 px-6 min-h-full relative">
          <header className="flex items-center gap-2 text-sm">
            <SidebarTrigger className="" />
            <Breadcrumbs />
          </header>
          <Outlet />
        </main>
      </main>
    </ProtectedLayoutProviders>
  );
}

export const GlobalSearchParams = type({
  cmd: '"open" | undefined',
  action: "'new-expense' | undefined",
});

export const CommandParam = GlobalSearchParams.get("cmd");
export const ActionParam = GlobalSearchParams.get("action");

export const Route = createFileRoute("/_protected")({
  ssr: false,
  component: LayoutComponent,
  validateSearch: GlobalSearchParams,
});
1 Reply
grumpy-cyan
grumpy-cyanOP•6mo ago
update: i actually already had zod installed so i tested- problem is not present with zod 🤔

Did you find this page helpful?