compatible-crimson

getRouteApi error

Hi ! I just added a new route in my application and it now shows this error in all my getRouteApi calls : "Type instantiation is excessively deep and possibly infinite." I've got a bit more than 100 routes. Everything was working well before I add this new route. Does someone has the same issue ?

66 Replies

compatible-crimsonOP•2y ago

I just tried to remove some routes and it's now working again. The problem is that I need more routes and as I saw, it is (or it was) possible to manage hundreds of routes with tanstack-router. I'm using the last version of Tanstack-router (1.26.7) and the last version of typescript (5.4.3)

like-gold•2y ago

cc @Chris Horobin

quickest-silver•2y ago

Looks like a non tail optimised recursion limit but I will have to double check Are you using file based or code based?

compatible-crimsonOP•2y ago

I'm using file based

like-gold•2y ago

do you have "complex" search params?

compatible-crimsonOP•2y ago

what do you mean by "complex" ? I've got routes with like 5 search params max. I'm using zod to parse search params, can it have something to do with it ? The new route that caused the error was not containing any search param

like-gold•2y ago

I am asking because of this issue https://github.com/TanStack/router/issues/1217

GitHub

No type safety on useSearch({ strict: false }) · Issue #1217 · TanS...

Describe the bug The type safety is not working as expected for useSearch or useParams when using strict: false in the options. Your Example Website or App https://stackblitz.com/edit/tanstack-rout...

like-gold•2y ago

it just seemed similar can you provide a minimal reproducer for the issue you are experiencing?

compatible-crimsonOP•2y ago

I'll try to do one, but I think I just need to add some routes. I didn't do anything particular, just added one more lazy file route as the others

like-gold•2y ago

does it only happen with lazy file routes?

like-gold•2y ago

I am asking because we have an example that generates 400 routes without issues: https://github.com/TanStack/router/tree/main/examples/react/large-file-based

GitHub

router/examples/react/large-file-based at main · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

compatible-crimsonOP•2y ago

Nope, adding one lazy file route broke all my getRouteApi in all my components Ok, then I'll try to give you a stackblitz with all my routes. It should do the same, I hope

quickest-silver•2y ago

And it only breaks getRouteApi. Link or even the createFileRoute is fine?

compatible-crimsonOP•2y ago

Didn't try before but nope, Link are not fine, they are not typed anymore I think anything related to routes are not typed anymore

quickest-silver•2y ago

Aha. Ok, that is odd because we do have 400 routes generated in the examples and it didn't break. Stackblitz would help a lot for us to determine exactly

compatible-crimsonOP•2y ago

Yep. I'm currently working on the stackblitz. Thanks for your help I tried to create a new reproduction and noticed that this is when I import my views that I got the error. My project contains a routes folder where I'm declaring routes & lazy files routes and it also contains a views folder when I declare the views that are called in the routes. Like : - routes - __root.ts - views - RootView.tsx When I import my view folder (where I'm using some of getRouteApi), it broke, otherwise, it works fine. I don't really know how it can be related to views. Maybe I got too much files in there ? idk

like-gold•2y ago

what's a view exactly?

compatible-crimsonOP•2y ago

A page or a part of a page. A view is a component associated to a route

like-gold•2y ago

so can you create a reproducer with these components?

compatible-crimsonOP•2y ago

I'll try to do it tomorrow I tried to create a minimal version but when I delete some files or move some others, the error is not showing anymore. It's kinda weird and I can't do a reproduction of something that needs a large codebase & that seems random. Can I screenshare my project or something else than reproducing it ? I tried on the 1.17.4 version and it allows a bit more routes before breaking

quickest-silver•2y ago

Ok. Can you at least explain the routes a bit. You have 200? What's the depth of the routes? Do you use any features of file routing like folder groups or layouts ? Do you have any params or search params? Is createFileRoute broken aswell?

compatible-crimsonOP•2y ago

I have 126 routes. My deepest route has 4 ascendant routes. I'm using folders to group my routes. In each route folder I'm using a lazy file routes to define the component, and if needed, I'm also using a normal file route to define searchParams or loaders

quickest-silver•2y ago

No layouts using _ prefix? How many route groups do you have (folder)?

compatible-crimsonOP•2y ago

createFileRoute is not broken, I can define routes but cannot call a route ID in a Link or getRouteApi or anything using it. I doesn't use _ prefix but use I used \ _ suffix. I got 128 route groups

quickest-silver•2y ago

How many routes with this suffix do you have?

quickest-silver•2y ago

If you have many routes with suffixes then it could be this type as it's not tail recursive optimised https://github.com/TanStack/router/blob/e85c9290c74fe77aaa88e112bc37ec256166c0a4/packages/react-router/src/fileRoute.ts#L44

GitHub

router/packages/react-router/src/fileRoute.ts at e85c9290c74fe77aaa...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

compatible-crimsonOP•2y ago

I got 38 routes using or descending from a suffix And got 5 routes with suffix first time I encountered this bug was after creating a new _ suffix route

like-gold•2y ago

does your reproducer contain the same _ suffix routes?

compatible-crimsonOP•2y ago

But now, I tested many things without creating a _ suffix route and it can break too

quickest-silver•2y ago

Could be this then. Does it work if you create a route without any suffixes (including it's parents)

compatible-crimsonOP•2y ago

Yes. But if I remove some codes in the loader or in other folders than route, it sometimes works. That's what I don't understand

like-gold•2y ago

try restarting typescript server / restarting your IDE

compatible-crimsonOP•2y ago

Seems like I can create some other routes before it breaks in this way

like-gold•2y ago

just to make sure its not some TS caching etc. problem

compatible-crimsonOP•2y ago

I already tried that, already tried on another computer too. I got the same problem

like-gold•2y ago

ah good to know so on your original code base where this problem occurs, what do you have to remove so the error disappears? ideally you could share your code base, just to router maintainers maybe?

compatible-crimsonOP•2y ago

I tried many things like removing some components file. (ofc I cannot build this way but the IDE is not showing the error anymore). I tried removing all not lazy route files and it works too (same, cannot build as I was using search param but the IDE is not showing the error) sure. how do we do ?

like-gold•2y ago

create a private repo on github, then invite chorobin and schiller-manuel? or if it is not necessary to keep it private, make it open of course

quickest-silver•2y ago

My current theory is that it's the Replace type then

compatible-crimsonOP•2y ago

Ok I'll create a new private repo in like 1 hour. Thanks very much !

like-gold•2y ago

I added a fix for the issue Chris pointed out, it's released now https://github.com/TanStack/router/releases/tag/v1.26.11 can you try if this helps?

GitHub

Release v1.26.11 · TanStack/router

Version 1.26.11 - 4/6/2024, 11:24 AM Changes Fix type optimizations (#1434) (eb7c587) by Manuel Schiller Packages @tanstack/react-router@1.26.11 @tanstack/router-devtools@1.26.11 @tanstack/react...

compatible-crimsonOP•2y ago

I just added you to the repo. I'dd try that new release nope, does not work in 1.26.11 https://github.com/Maquinours/tanstack-router_bug_reproducer/invitations

quickest-silver•2y ago

Shame it wasn't that. I will have to check it out later today

compatible-crimsonOP•2y ago

Thank you !

like-gold•2y ago

the problem goes away if I comment out all validateSearch properties

compatible-crimsonOP•2y ago

weird

like-gold•2y ago

not really unfortunately ... there is lot of type magic going on with the search params under the hood

compatible-crimsonOP•2y ago

oh I see

quickest-silver•2y ago

Zod issue?

like-gold•2y ago

no I suspect it is one of these types where search params are merged, e.g. https://github.com/TanStack/router/blob/main/packages/react-router/src/routeInfo.ts#L60

GitHub

router/packages/react-router/src/routeInfo.ts at main · TanStack/ro...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

like-gold•2y ago

probably not that one in particular but there similar ones

quickest-silver•2y ago

But I thought those weren't recursive when I looked I was looking at optimising these in a separate branch but not sure it would fix this Didn't raise a PR because I wanted type tests

like-gold•2y ago

it's enough to comment out validateSearchSchema in src/routes/app/route.ts so the errors go away as soon as this file has any validateSearchSchema (like the one below), the error occurs. so I think we can rule out zod

validateSearch: () => ({ foo: 'bar' }),

validateSearch: () => ({ foo: 'bar' }),

quickest-silver•2y ago

I will have time later. And there's no parents with search either for this route?

like-gold•2y ago

no this does not have a parent with search

compatible-crimsonOP•2y ago

but it have many childrens

quickest-silver•2y ago

Yeah so that does sound like merging the search params

quickest-silver•2y ago

There were some optimisations I've applied which does help but I've noticed the error can still happen. I'm wondering if it's just general bad TS performance causing it to crash out https://github.com/TanStack/router/pull/1436/files

GitHub

perf: improve performance of search params merging by chorobin · Pu...

We need to avoid TFullSearchParams from being eagerly evaluated. This happened for a number of reasons. Generic constraints on TFullSearchParams. We need to get rid of these. Do not use Omit for A...

quickest-silver•2y ago

Hey guys. Good news. Think I fixed the issue in the above pr. It doesn't error for me anymore.

compatible-crimsonOP•2y ago

Hi ! Good to hear ! Good job and thank you very much, you saved me !

quickest-silver•2y ago

I'm confused why we didn't hit this issue before actually

compatible-crimsonOP•2y ago

Yep, that's weird

like-gold•2y ago

this fix is now released in https://github.com/TanStack/router/releases/tag/v1.26.12

GitHub

Release v1.26.12 · TanStack/router

Version 1.26.12 - 4/7/2024, 10:04 AM Changes Fix improve performance of search params merging to avoid instantation errors (#1436) (c5eaf1c) by Christopher Horobin Chore deps-dev: bump vite from...

compatible-crimsonOP•2y ago

nice ! Thank you !

quickest-silver•2y ago

We released another fix so just check it's working correctly

compatible-crimsonOP•2y ago

Thanks. I'll check that tomorrow. Thank you for your work and your reactivity

Gaming

Programming

getRouteApi error

Did you find this page helpful?