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

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

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,
});

TanStack•12mo ago•

1 reply

uncertain-scarlet

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

ssr: false

validateSearch

validateSearch

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,
});

searchParam validation causing hydration error?

Similar Threads

searchParam validation causing hydration error?

Similar Threads

Similar Threads

Similar Threads