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

plain-purple
plain-purple1/27/2025

Router with azure msal-browser & msal-react

Does anyone have an example with tanstack/router integrated with microsoft's msal for authentication? I have an app built with react router, and when I try use the same msal config and setup, I get an error
uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors
uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors
However the MsalProvider component does the initialization on my other project, so trying to wrap my head around that one, in case it would be a bad idea if both call initialize....
conscious-sapphire
conscious-sapphire1/27/2025

Dynamic value of useSearch() from?

Hello, I'd like to create a custom hook that uses useSearch() hook with with full type-safety. I have 2 almost identical pages, with same search params and I'd like to use this hook only there. Is it possible to allow the useSearch to look either for one or the other one URL as 'from'?
correct-apricot
correct-apricot1/27/2025

Deploying to Netlify and error decoding lambda response errors

Hello, I don't know where to start. I Recently moved from Vercel to Netlify, and I cannot get it to work with my Tanstack Start project. Everytime I navigate to my app https://flowthings.netlify.app/, I get the following error: ```js...
subsequent-cyan
subsequent-cyan1/26/2025

Is there a way to change the default navigation behavior to preserve search params?

Question speaks for itsself haha. But I'd like to not have to write this everywhere....
search={(n) => n}
search={(n) => n}
...
adverse-sapphire
adverse-sapphire1/26/2025

How do I show a toast from loader error?

Previously I used useEffect to make fetch data and if there was any error used catch to show a toast ```ts useEffect(() => { const fetch = async () => { try {...
adverse-sapphire
adverse-sapphire1/25/2025

How to access path params from inside child or grand child which in separate file?

``` function RouteComponent() { const { id } = Route.useParams(); return <BlogPage id={id} />;...
ratty-blush
ratty-blush1/24/2025

Anyone move from NextJS -> Router? How big of a PITA was it?

For clarity, I'm NOT using any major SSR, nor a monorepo. I have a NestJS backend deployed on Railway currently. I am currently using ShadCN, Tailwind, and Clerk though....
adverse-sapphire
adverse-sapphire1/24/2025

how to navigate to dynamic route using hard-coded path?

This is the route blogs/$id and I wanna navigate to /blogs/1 when I did this navigate({ to: '/blogs/1',}); I get error ```...
inland-turquoise
inland-turquoise1/23/2025

Not Found "Fuzzy" mode (default) not bubbling to the root not found component

I only have one Not Found Component configured, that is in my root root.tsx route. When navigating to /valid/invalid-route it shows me the generic 404 not found and tanstack throws a warning in the console about configuring my own 404 not found page which I already have in my root.tsx file....
No description
compatible-crimson
compatible-crimson1/23/2025

Question about file structure

Hello everyone! I started using Tanstack Router recently and I'm loving it so far! I have a question about structuring my files and folders in an admin application:...
evident-indigo
evident-indigo1/22/2025

context not up to date in `beforeload` (with stackblitz)

I have a typed context set up to capture permissions and I want to use them in beforeLoad similar to how the docs describe where I pass it to the routing provider, but the context isn't being updated until after beforeLoad runs -- what am i missing here? see stackblitz below https://stackblitz.com/edit/tanstack-router-56o6e9vq?file=src%2Froutes%2Findex.tsx...
like-gold
like-gold1/22/2025

Is there any way to get available routes from specific route point?

For example, i have this kind of structure: ``` - projects - index.tsx - timer...
generous-apricot
generous-apricot1/21/2025

Recursive routing (Seeing if tanstack router works for our project)

In our project we have recursive routes and I can't seem to find an example of it in the docs This isn't our app but it gets the concept across Imagine an app that shows you a person say '/person/$id'...
No description
passive-yellow
passive-yellow1/21/2025

Broken Start examples

Are you already aware that the start examples are currently broken? I'd don't see a GitHub issue but I might be overlooking it
foreign-sapphire
foreign-sapphire1/21/2025

TSS dynamic sitemap

What's the preferred way to create a dynamic sitemap in TSS? Was thinking of an API route but it seems a bit quirky to get those to work from the root of the domain.
stormy-gold
stormy-gold1/21/2025

Search params inheritance merging

Hi everyone! I’m running into an issue with search param inheritance. I have a parent route /users with search params defined like this: ```ts...
other-emerald
other-emerald1/21/2025

custom link inside component with asChild

i can create a customLink provided by the examples in the doc. But when i want to use this link inside a custom component, lets say a shadCN dropdown menu item with asChild, it throws an error that i should provide an forward ref. Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Basic example...
sensitive-blue
sensitive-blue1/21/2025

Throwing errors with non-500 status from server functions

Hiya, great work on Tanstack Start and Router, really enjoying using it! Except for this tiny nitpick: If I understand the docs (https://tanstack.com/router/latest/docs/framework/react/start/server-functions#throwing-errors) correctly, you can only throw errors with HTTP status code 500. I'm just starting to build my new app with Tanstack Start, and I'm implementing auth first. It is fully functional; I validate with Zod (password.length > 8 etc.), and I throw an error if the username and password don't match. This means that my server responds with HTTP 500 in these cases, which is of course not the really correct status code. Is there a way to throw errors with custom status codes (400 and 401 in this case)? I tried returning a custom Response instead of throwing errors, but that messes up the return type of the action. Or am I just totally misunderstanding how I should go about implementing a login server function?...
optimistic-gold
optimistic-gold1/21/2025

How to Make ENV Accessible in a TanStack Start Server Build?

I'm using the Clerk example: Clerk Basic Example Environment Variables I have the following in my .env: ```env...
extended-salmon
extended-salmon1/21/2025

Skip navigate type check for an common component

I have a monorepo: apps |- admin |- client libs...