T
TanStack•8mo ago
gentle-gray

Type Errors when using navigate from useNavigate

Hi, I am getting type errors on my search params when I pass them to the navigate function created by useNavigate. I have put together a very basic example to replicate the issue I am facing: 
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { zodValidator } from "@tanstack/zod-adapter";
import { z } from "zod";
import { Button } from "~/components/ui/button";

const SearchParams = z.object({
  message: z.string().optional()
})

export const Route = createFileRoute('/')({
  component: RouteComponent,
  validateSearch: zodValidator(SearchParams),
  loaderDeps: ({search: {message}}) => ({message}),
  loader: ({deps: {message}}) => {
    return {message}
  }
})

function RouteComponent() {
  const {message} = Route.useLoaderData();
  const navigate = useNavigate()

  const handleClick = () => {
    navigate({to: ".", search: {
      message: "Navigated"
    }})
  }

  return (
    <div>
      <h1>Hello World</h1>
      search: {message ?? "No Search Params"}
      <div>
      <Button onClick={handleClick}>
        Hello
      </Button>
      </div>
    </div>
    
  )
}
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { zodValidator } from "@tanstack/zod-adapter";
import { z } from "zod";
import { Button } from "~/components/ui/button";

const SearchParams = z.object({
  message: z.string().optional()
})

export const Route = createFileRoute('/')({
  component: RouteComponent,
  validateSearch: zodValidator(SearchParams),
  loaderDeps: ({search: {message}}) => ({message}),
  loader: ({deps: {message}}) => {
    return {message}
  }
})

function RouteComponent() {
  const {message} = Route.useLoaderData();
  const navigate = useNavigate()

  const handleClick = () => {
    navigate({to: ".", search: {
      message: "Navigated"
    }})
  }

  return (
    <div>
      <h1>Hello World</h1>
      search: {message ?? "No Search Params"}
      <div>
      <Button onClick={handleClick}>
        Hello
      </Button>
      </div>
    </div>
    
  )
}
The above code produces the following type error: 
Object literal may only specify known properties, and 'message' does not exist in type 'ParamsReducerFn<unknown, "SEARCH", string, ".">'.ts(2353)
link.d.ts(118, 5): The expected type comes from property 'search' which is declared here on type 'NavigateOptions<unknown, string, ".", string, "">'
Object literal may only specify known properties, and 'message' does not exist in type 'ParamsReducerFn<unknown, "SEARCH", string, ".">'.ts(2353)
link.d.ts(118, 5): The expected type comes from property 'search' which is declared here on type 'NavigateOptions<unknown, string, ".", string, "">'
The code works without issue but I don't understand why I am getting the type error from VSCode.
6 Replies
gentle-gray
gentle-grayOP•8mo ago
The interesting thing is that 
 <Link to="." search={{
        message: "Link clicked"
      }}>Test</Link>
 <Link to="." search={{
        message: "Link clicked"
      }}>Test</Link>
works without issue Here's something even stranger use router.navigate from useRouter does not give the type error.
absent-sapphire
absent-sapphire•8mo ago
I cannot reproduce this locally can you please share a complete minimal example (git repo) ?
gentle-gray
gentle-grayOP•8mo ago
Funny enough, replicating this for you led me to finding the issue. This is actually a Tanstack Start project using React Query as well and when I was creating the router I had the following code in the router.tsx: const routerWithQuery = routerWithQueryClient(router as any, queryClient). Removing the as any fixed my issue (and I think some other weird issues I was having). Sorry for the false alarm.
absent-sapphire
absent-sapphire•8mo ago
best outcome!
gentle-gray
gentle-grayOP•8mo ago
Turns out if you obliterate the type info of your router you're gonna have a bad time
absent-sapphire
absent-sapphire•8mo ago

Did you find this page helpful?