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
Naming server functions for logs
Is it possible to set a name for a server function? For example I see this in my logs:
/_serverFn/35b9306603fe2ea5a6a884ff22be58cf81e52afb4d4ab0edfed5ac694d6c3b52
I understand obfuscation is preferable to some, but personally I'd like to be able to see what server functions are getting called in my logs so I can keep track of when things are getting called more easily...nitro v3 is not working for me
I can build but when i run the app i get errors
...
Listening on http://[::]:3000
TypeError: r.split is not a function
Listening on http://[::]:3000
TypeError: r.split is not a function
SSR build corrupts non-ASCII (UTF-8) characters in JSON imports
Hey! I noticed that when I updated Tanstack Start, I started having hydration mismatches due to a mismatch between the server and the client. After further looking into it, I noticed that some of my hebrew translations are getting corrupted when bundled for SSR. In the server, the characters are corrupted but on the client they remain correct. I am not sure if the issue is indeed with Tanstack start or perhaps vite itself, I couldn't find any way to properly debug this, so I'd love to know if there's anything I can do to pinpoint it.
Versions:
```json
"@tanstack/react-query": "^5.66.5",...
What was `readValidatedBody` replaced with?
There used to be a
readValidatedBody in "@tanstack/react-start/server" which seems to be removed now (in the latest version). It doesn't seem like it's mentioned here: https://github.com/TanStack/router/discussions/2863
Am I missing something?
Thanks...Migration to stable version of Tanstack Start
Is there migration guide to stable version of tanstack-start?
i just cloned the start-basic example and it doesn't work in prod
help. in dev it works fine, after i build, how do i run the production server?
start script returns this:
Why is there a delay between when the __root.tsx layout loads and the <Outlet />?
I have deployed my project on Netilify. When you refresh the page you can see the layout loads instantly but after a split second, then the outlet loads. If you look at dev tools and refresh the page, you can see the main tag being injected in. This happens on any page. How do I fix this? Thanks.
Here are the links:
https://sovereign-atelier.netlify.app/...
Built TanStack Start (Solid) project from create-tsrouter-app not serving client code/assets
Hello! I've set up a new project using create-tsrouter-app with the Solid framework, but after a successful build, the production server doesn't seem to be serving the client-side code (JS/CSS). The page loads without styles or interactive elements.
My Setup and Steps:
Creation Command: npx create-tsrouter-app@latest --framework solid...
start-clerk-basic: Infinite redirect loop when refreshing session token
Hi! I am using the start-clerk-basic example, with set clerk env variables in
Also, the Clerk profile button in the topbar briefly flickers and renders the SignIn button. When adding a debug log into the
.env. I can log in fine. However, when reloading the page, the vite server outputs this:
Clerk: Refreshing the session token resulted in an infinite redirect loop. This usually means that your Clerk instance keys do not match - make sure to copy the correct publishable and secret keys from the Clerk dashboard.
Clerk: Refreshing the session token resulted in an infinite redirect loop. This usually means that your Clerk instance keys do not match - make sure to copy the correct publishable and secret keys from the Clerk dashboard.
fetchClerkAuth of the __root route, it shows that userId is null. So it seems like on the server side, we are not able to authenticate correctly with Clerk. Client-side then it works....Hydration error just by adding a <Scripts /> (suppress not working)
My TSS app with Convex, Convex auth and dark theme is suddenly showing a hydration mismatch error. Even when I comment out everything in
<body /> I get this. Only way to make it go is to remove the <Scripts /> tag from TSR.
Surprisingly adding suppressHydrationWarning={true} doesn't even make it go away. Any help here?
I used the Convex option from the CLI in the official Tanstack docs....
Missing environment variables on Cloudflare workers
https://github.com/kylekz/tss-cf-workers
i've taken the
pnpm create @tanstack/start@latest starter, picked tailwind + eslint + t3env + upgraded all packages to latest. then added one server var and one client var
the main branch uses a singular env.ts as per the starter, which doesn't work when running pnpm dev as server vars don't get loaded into import.meta.env, let alone attempting to deploy this
...`Uncaught (in promise) SyntaxError 'useSyncExternalStore'
Just upgraded react-start to 1.131.7 and I keep getting this following error:
...
Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/index.js?v=1a8aa761' does not provide an export named 'useSyncExternalStore'
Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/index.js?v=1a8aa761' does not provide an export named 'useSyncExternalStore'
Is there a way to set a global server context?
I'd like to have some objects passed in to every request handlers (e.g.
createFileRoute, createServerFn) (kind of like a server context, NOT a request context). Some of these objects would be:
- a database connection (created via createServerOnlyFn)
- a parsed env object containing environment variables and other settings
- objects representing a connection to other services...[✅] TanStack Start doesn't read CSS imported from external package component
First day working with Start and already have a massive problem. In a default starter created by the CLI
pnpm create @tanstack/start@latest I've added RainbowKit per the instructions (https://rainbowkit.com/docs/installation) and while everything works fine, the component has no styling. It works fine on any other framework so it's 100% problem with Start.
I found they're using package.json with:
```json
{...Migrated from next to tanstack im unable to deploy to cloudflare workers
✘ [ERROR] Build failed with 3 errors:
✘ [ERROR] Could not resolve "unenv/node/console"
node_modules/@cloudflare/unenv-preset/dist/runtime/node/console.mjs:9:7:...
node_modules/@cloudflare/unenv-preset/dist/runtime/node/console.mjs:9:7:...
migrating from next.js - better guide?
i'm migrating my next.js project to tanstack start. is there a better guide on doing this? i just started migrating and found the current one https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js is missing some concepts like server component, layout pathless groups (e.g. equivalent to
src/(app)/layout.tsx?), opengraph, headers, redirect, 404, after from next/server, error pages, proxy (middleware) , api etc. i need to go deep and find the possiblely equivalent apis in...Can I proxy?
Hi, I’m building a CMS system with TanStack Start where the backend will handle HTML updates and API responses. On the frontend, I need to make requests to my backend API, but I don’t want the actual API URL to be exposed to the client. What is the recommended way to set up proxying in TanStack Start so that the frontend can call the backend without revealing the real API endpoint?
Mark an object as server only?
Is there a way to mark an object/function/variable as server only? E.g
const SUPER_SEGRET_OBJ = something; in the global scope.createServerOnlyFn vs createServerFn?
What's the difference between these two:
- https://tanstack.com/start/latest/docs/framework/react/guide/server-functions
- https://tanstack.com/start/latest/docs/framework/react/guide/environment-functions...
The component rerender whole application every time when I switch between items in the list on hover
This issue occurs due to the to parameter. Should I comment it out or use a static value? What’s the best approach for this code?
<WrapperComponent
{...(hasChildren
? {
onClick: handleToggleCollapse,...