TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

other-emerald
other-emerald10/10/2025

create-tsrouter-app didn't print debug console.log, warn, error in terminal.

hello i have a questions i create project using create-tsrouter-app, so realized that console.log, error warn or anything like that in the terminal, and i had to check the console in the browser??...
No description
protestant-coral
protestant-coral10/9/2025

Remove search params from url on beforeLoad

What is the preferred way of deleting search params from the URL? We have implemented a magic link auth system that basically adds the JWT token to the URL, I set this JWT token in localstorage and it handle by the API. But i dont want this token to be in the URL the whole time so i want to delete it as soon as its added to localstorage. ```ts beforeLoad: async ({ context, search }) => {...
magic-amber
magic-amber10/9/2025

How to get pending component to show instead of stale data with loader + query

Currently when loading data with ensureQueryData + useSuspenseQuery it will show the loading component the on first load. However if the query is invalidated, subsequent loads show the stale data instead of the pending component again. The route is also not preloaded the second time. I'd like to show the pending component to avoid showing stale data, as well as allow the route to preload....
quickest-silver
quickest-silver10/9/2025

Auto code splitting - does component need to be defined in route file?

Hello! I need clarification on the automatic code splitting feature. Current Pattern: ```tsx // Separate file...
other-emerald
other-emerald10/8/2025

vite externalized node dependencies

I am getting a lot of these errors when building my vite app that uses tanstack-router: [plugin vite:resolve] Module "node:fs" has been externalized for browser compatibility, imported by "@tanstack/router-generator/dist/esm/generator.js" I did upgrade vite from 4 to 6 recently, but I don't know if these warning were there before. Anyone know how to handle this?...
magic-beige
magic-beige10/8/2025

params.parse method executing multiple times after redirect

Hello everyone, I'd to share the strange behavior I'm getting when I navigate to a route with a path parameter with a invalid parameter, to check whether that is expected or not. The strange behavior is that when I navigate to /classes/0/users route, params.parse is executed, then beforeLoad is executed and it throws a redirect to /classes/, and that successfully redirects me to that route, but when I check the logs I see that params.parse were executed more 4 times after the redirect. Does anyone know if that is expected? Is there a chance that I'm doing something wrong that could cause that behavior? ...
No description
stormy-gold
stormy-gold10/8/2025

remount when navigating

hello everyone 👋 we are experiencing an issue were our users click on our navigation bar to stay on the same page and they expect the state to reset we have seen the reloadDocument option but it would slow down all our navigation so we don't want to do that...
other-emerald
other-emerald10/8/2025

Authenticated Routes and notFoundComponent

Hi, I currently have a createRootRoute with a notFoundComponent, however I want different behaviour if the user is authenticated or not. I have a bunch of routes that are available to not logged in users, but when they navigate to a route that doesn't exist, I want to send them to the login page. When they are logged in an within the authenticated section of the app I want to show them a proper 404 page. I handle authenticated routes in other places like the docs say, with the beforeLoad and a r...
magic-amber
magic-amber10/7/2025

Pathless Layout search params.

Are pathless layouts allowed to define/set search params for their child routes? I currently have a setup where the pathless layout contains the filter controls for a gallery, which is supposed to store the values in search params. however the search params keep flashing. pathless contains the validateSearch and search middleware, while the child tries to read search params from loaderdeps. Not sure if a bug, bad configuration or just not supported currently....
sensitive-blue
sensitive-blue10/7/2025

Router Monorepo examples broken

Just tried to fork all 3 examples about monorepos and all of them are not working as expected. useLoaderData and useSearch are always inferred as any I checked previous questions and strict ts config is set to true. Any ideas? I am trying to setup the same structure in my project and so far everything becomes any....
No description
inevitable-black
inevitable-black10/7/2025

Lazy Loaded Route order of operations.

```typescript export const useOrganizationsByIdInEditOrganization = () => { const { editOrganizationId } = useParams({ strict: false, ...
wise-white
wise-white10/6/2025

search parameter is not inferred correctly?

I'm using validateSearch according to the documentation but the type is not inferred at all. It just shows as an empty object, what am I doing wrong?
No description
flat-fuchsia
flat-fuchsia10/6/2025

customLink with React Aria

I understand that the documentation approach suggest to wrap MyCustomLink that returns the AriaLink with createLink. What I want to know is if I need to do that with whatever component that uses AriaLink under the hood. E.x let's take the pagination from Intent UI (1st image)....
No description
national-gold
national-gold10/5/2025

Tanstack routeTree generation multi-layout issues

For my react app's build process, i need to use tanstack router cli's route generation before building. Big problem is that I'm running into conflicting layout.tsx. What really confuses me is that it generates the routeTree just fine during dev, but once I try to use the CLI it flips out. ```ts Error: Conflicting configuration paths were found for the following routes: "/", "/", "/", "/events/$eventId/dashboard/", "/events/$eventId/dashboard/", ... Please ensure each Route has a unique full path....
xenial-black
xenial-black10/5/2025

I keep creating infinite loops when redirecting in beforeLoad

I think I have a fundamental misunderstanding of how the route loader work. In consequence, I already created multiple infinite redirect loops with tanstack router 🙁 Here's an instance where this happens. I navigate a user to the logout route:...
optimistic-gold
optimistic-gold10/4/2025

Invalidating router context cache with supabase integration

Hello, I face a problem to reinvalidate router context when going to login page via URL. The issue is caused by lack of reinvalidation of react router context. In my setup I have an Auth context provider with effect ```tsx useEffect(() => { supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user)...
like-gold
like-gold10/4/2025

Code based useParams hook works with pathless id prefixed to route.

My routing tree looks like the following: RootRoute -> Pathless_Layout_Route -> Products -> ViewProductRoute. When i use the useParam hook like this: ```js...
metropolitan-bronze
metropolitan-bronze10/3/2025

(Lazy) load routes from other chunks at runtime

Heya, I have an application that I've split into several layers (depending on the features available to the user) which I've told Vite to bundle into chunks and then lazy-load them when required (lazy(() => import('./layer-1'))). Because of regulations, I need to keep those chunks separate, what goes on in layer-1 must only be inside layer-1 and not leak out. This includes route data, too. I could lazy load the components but the information about the route/the loaders it uses would still be bundled in the initial bundle if I got it right, which I'm not allowed to do. I've looked into code splitting but it seems like it's more about distributing the route data and less about putting it in different independent bundles....
vicious-gold
vicious-gold10/3/2025

createServerFileRoute

I get this typescript error:
Module '"@tanstack/react-start/server"' has no exported member 'createServerFileRoute'.
Module '"@tanstack/react-start/server"' has no exported member 'createServerFileRoute'.
Can't seem to find the update in the release docs, I'm looking wrong. Could someone please give me a link to the correct migration instruction? I reverted back to 1.131.50...
adverse-sapphire
adverse-sapphire10/2/2025

Help setting up Plausible analytics

i tried a lot of variations of setting up the script including using head() scripts array, they all seem to load the script and i can use plausible function in the browser console, this is the latest one i tried (directly in <head>): ```ts // __root.tsx function RootLayout() { return (...
Next