conscious-sapphire

Typings not working in Vite project

Hi Guys for some reason my Tanstack router typings are not working as expected, I also receive an error while trying to register the router instance I guess it has something to do with my tsconfig but I am not sure

20 Replies

conscious-sapphireOP•2y ago

I use vite plugin and latest tanstack router v1.16.6 with file based config could someone share a tsconfig which will be great starting point for Vite + TSR

stormy-gold•2y ago

Is this available in a public repo? or perhaps you've got a reproduction available? This kind of error typically pops up if you try to import and consume the router instance (returned from the createRouter function) within a route definition.

stormy-gold•2y ago

If you need a starter for reproducing the error, here's the Quickstart (file-based) example on Stackblitz.

StackBlitz

Router Quickstart File Based). Example - StackBlitz

Run official live example code for Router Quickstart File Based)., created by Tanstack on StackBlitz

conscious-sapphireOP•2y ago

I use tanstack inside of a monorepo I will try to compare the tsconfig, but what is the tsconfig.dev.json inside of the quickstart example? you mean I would use the router instance elsewhere? I only use it inside of the <RouterProvider router={router}/> as I havent exported it elsewhere

stormy-gold•2y ago

This is my tsconfig.json for reference should it help.

GitHub

nv-rental-clone/tsconfig.json at master · SeanCassiere/nv-rental-cl...

Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

stormy-gold•2y ago

Looks like then reproduction will be only way to diagnose this.

conscious-sapphireOP•2y ago

thanks for the input I will try to isolate.. weird is, that it worked before and I don't know since which version it stopped working

stormy-gold•2y ago

Git history maybe?

conscious-sapphireOP•2y ago

I havent touched the routes for a while, was just coding components itself, I might gonna remove the overhead of mono repo and see if that helps

stormy-gold•2y ago

It really shouldn't affect it, but then again monorepos have historically been the definition of playing on 'hard-mode'...

conscious-sapphireOP•2y ago

I tripple checked... router instance is only used within RouterProvider and the interface Register part.. but Webstorm directly complains about TS2502: router is referenced directly or indirectly in its own type annotation. must be something TS config related.. I copied your tsconfig into the project without success

conscious-sapphireOP•2y ago

there are days I simply hate TypeScript..

conscious-sapphireOP•2y ago

quick question: sometimes you write _auth.route.tsx and sometimes without *.route.tsx. Is there a recommended way?

stormy-gold•2y ago

Nope I just haven't migrated some of the older stuff. Just for the sake of it, could you confirm this also happens in VSCode? I've seen a few issues in the past where Jetbrains IDEs threw errors weird TS errors.

rival-black•2y ago

I had this problem when I tried to create a custom Link component, where I imported the type of the router. I worked around it by importing the routeTree instead. In case this helps..

conscious-sapphireOP•2y ago

yes its in both IDEs, Webstorm and VSCode I do have a custom link (which stopped being typed) but I do it this way:

import { AnyRoute, Link, LinkProps, RegisteredRouter, RoutePaths } from "@tanstack/react-router"

export function PtLinkButton<
  TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = "",
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = ""
>({
  linkProps,
  hasDefaultProps,
  ptVariant,
  outlined,
  ...buttonProps
}: ButtonProps & {
  hasDefaultProps?: boolean
  outlined?: boolean
  ptVariant?: mainColorsKeys
  linkProps: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
    RefAttributes<HTMLAnchorElement>
}) {

import { AnyRoute, Link, LinkProps, RegisteredRouter, RoutePaths } from "@tanstack/react-router"

export function PtLinkButton<
  TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = "",
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = ""
>({
  linkProps,
  hasDefaultProps,
  ptVariant,
  outlined,
  ...buttonProps
}: ButtonProps & {
  hasDefaultProps?: boolean
  outlined?: boolean
  ptVariant?: mainColorsKeys
  linkProps: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
    RefAttributes<HTMLAnchorElement>
}) {

conscious-sapphireOP•2y ago

if I enable noImplicitAny:true inside of tsconfig then I already receive following error

conscious-sapphireOP•2y ago

Ok I found the reason why the typings broke: I had a test file in my routes where I did not returned a valid JSX, which caused that the router typings were not working any longer. after fixing the one file everything is smooth again.. learned a lesson today

stormy-gold•2y ago

typescript it doesn't help that Router requires everything about to be as close to perfect as possible for its type-inferrence to work when registering the router on the module.

conscious-sapphireOP•2y ago

basically I tried to return an image blob instead of JSX, which seemed to didnt bother in previous versions of the router. I raised that question a while ago inside of the general chat, being able to return something else than a JSX component. My bad that I didnt comment or temporarily remove that file

Gaming

Programming

Typings not working in Vite project

Did you find this page helpful?