Navigating to add "global" search params and TS types

[reintroducing]

I'm trying to implement a flow where clicking on something adds a search param to the URL which I then want to pick up in my root view and do something with. The code itself is working as expected, but I'm getting TS errors and can't figure out why. Here is a StackBlitz showing the errors: https://stackblitz.com/edit/tanstack-router-8ryb92gq?file=src%2Froutes%2F__root.tsx,src%2Froutes%2Findex.tsx&preset=node

in __root.tsx i've defined the expected validateSearch method for the params. The in index.tsx i'm trying to navigate and add the search params (which seems to be working correctly according to the dev tools). As written, I get the error Object literal may only specify known properties, and 'overlay' does not exist in type 'ParamsReducerFn<Router<RootRoute<(search: Record<string, unknown>) => SearchParams, { auth: Auth; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, ... 4 more ..., Record<...>>, "SEARCH", string, string | undefined>'.(2353)

Additionally, if you comment lines 18-20 out and uncomment 12-17, there is a different error: Type '(prev: { redirect?: string | undefined; usersView?: { sortBy?: "id" | "name" | "email" | undefined; filterBy?: string | undefined; } | undefined; overlay?: "gameInvite" | null | undefined; showNotes?: boolean | undefined; notes?: string | undefined; userId?: number | undefined; }) => { ...; }' is not assignable to type 'true | ParamsReducerFn<Router<RootRoute<(search: Record<string, unknown>) => SearchParams, { auth: Auth; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, ... 4 more ..., Record<...>>, "SEARCH", string, string | undefined> | undefined'.

I'm having a really hard time understanding why these errors are appearing and can't find an answer anywhere. I've followed the search params setup as closely as I could to the examples provided and the fact that it works tells me I'm doing it correctly, but no idea why the TS errors are showing up. Any help would be greatly appreciated.

[schiller-manuel]

this works if you specify a from

  const navigate = useNavigate({ from: '/' });

[reintroducing]

@schiller-manuel interesting, that does seem to fix the example, but it does not seem to fix the error in my project which has a similar setup. I'm getting this:

My root route is as follows:

type OverlayId = 'gameInvite';

type SearchParams = {
  overlay?: OverlayId | null;
};

export const Route = createRootRoute({
  validateSearch: (search: Record<string, unknown>): SearchParams => {
    return {
      ...(search.overlay && {overlay: search.overlay as OverlayId}),
    };
  },
  component: Root,
});

in regards to the from property in the object, clicking a button to add a query param can happen from anywhere/any route, so does that still make sense (even if i was able to eventually get rid of the TS error)?

[schiller-manuel]

instead of setting from you can specify : to: '.'

see the docs at https://tanstack.com/router/v1/docs/framework/react/guide/search-params#writing-search-params

if you can reproduce your error in an example, I can have another look

[reintroducing]

@schiller-manuel you are also right that to: '.' fixes it as well, in the SB at least.

I was able to get a reproduction of the issue I'm seeing, and also nailed it down to what is causing it. Here is the repro: https://stackblitz.com/edit/tanstack-router-tkm3dr8z?file=src%2Ftest.ts,src%2Fmain.tsx,src%2Frouter.tsx,tsconfig.json&preset=node

The problem is that I have strict: false in my TS config. The project I'm working on is in TS but its a legacy project where TS adoption is going slowly due to the fact that we have a lot of old files that don't adhere to strict TS guidelines that I have yet to refactor. To avoid seeing 5k+ TS errors, I had to set it to false. I understand that TanStack router needs this to be true, but unfortunately this is the hand I've been dealt at the moment.

I've modified the SB to add test.ts which shows the exact error that I'm getting. Is my only option to add a @ts-ignore here? Or is there something else I could do that can help this?

[schiller-manuel]

"strictNullChecks": true, is necessary for tanstack router to function properly w.r.t. typescript

[reintroducing]

yeah thats what i figured, i'll have to eat this for the time being, unfortunately :\