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
Cannot find module '~/components/DefaultCatchBoundary'
Rookie issue, probably, but I can't figure out what I'm doing wrong here. I followed the instructions at https://tanstack.com/start/latest/docs/framework/react/quick-start carefully, but when I serve the project, I get this error:
c:\temp\start-basic> npm run dev
dev...
How to do SSR with graphql
Hi. I'm trying to do SSR with graphql here, but im unsure how to implement it correctly in tanstack start.
I've only been able to do it on the clientside so far, following https://tanstack.com/query/latest/docs/framework/react/graphql
I believe I should implement server functions https://tanstack.com/start/latest/docs/framework/react/server-functions
but I'm not quite sure how to implement this with graphql....
Best way to handle a user generated page
A bit of an interesting one here. I'm currently in the process of building a POC for a page builder for a page in my application. The idea is to have the user compose this page (in some sort of back office) from a set of predefined blocks that they can add, remove, reorder and do some basic configuration. Some of these blocks will have to fetch data over an API when they're loaded in the actual page.
I'm wondering if there's some optimisation I can do to cache the result of this page's construction so I don't have to go through the process of reconstructing it the page every time someone loads it?
I figure I might need to have some sort of job run that compiles it down to a static page and then serve that static page from my route?...
Dynamic search params without reloadDocument
I try to achieve dyanamic filters component based on searchParams.
On my page i want to display products which need to be filtered by selected filters.
It works like expected but due to change search params, the whole route reload.
Once we have these deps in place, the route will always reload when the deps change. ...HydrationError on globalCss import
I followed the basic example and loading in my global.css gives me a hydration error
```typescript
import globalCssUrl from "@/styles/globals.css?url";
...
http2 and tanstack start
Hey I'm wondering if there's a workaround for vinxi not supporting http 2?
My app is basically unusable without http2....
Lots of trouble around the Authentication with start
Hi guys, I'm trying to add oauth authentication to my app and its very constraint. I've seen a lot of people struggling with the authentication
Basically the only way seems to use a server function with
useSession in the router and propagate the authentication state in the router context.
As the router need to work in the server for first rendering, all typicals way to provide authentication (using local storage and /or a react AuthProvider) are not supported.
And the only way have several flaws:...tRPC does not have headers data when refreshing.
I'm using tRPC and better-auth in my project and have it setup like this
```ts
export async function createContext(opts: CreateNextContextOptions) {
const session = await auth.api.getSession({ headers: opts.req.headers });
...
`app.config.ts`: The inferred type of 'default' cannot be named without a reference to ...
Getting this error when setting up Start according to these docs in a Turborepo. Has anybody run into this?
...
The inferred type of 'default' cannot be named without a reference to '.pnpm/vinxi@0.5.3_@types+node@22.12.0_db0@0.3.2_ioredis@5.6.1_jiti@2.4.2_lightningcss@1.29.2_terser_25eelrexirydiqaxrytk4q6kd4/node_modules/vinxi'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'default' cannot be named without a reference to '.pnpm/vinxi@0.5.3_@types+node@22.12.0_db0@0.3.2_ioredis@5.6.1_jiti@2.4.2_lightningcss@1.29.2_terser_25eelrexirydiqaxrytk4q6kd4/node_modules/vinxi'. This is likely not portable. A type annotation is necessary.ts(2742)
Skip global middleware for certain serverFns?
Hello! I'm building an application that has a couple publicly accessible pages and a bunch of pages behind a login.
I'd like to add an authorization check for my server functions via middleware. My hope is that I could register it as global middleware and then somehow just skip it for the server functions that populate my publicly accessible pages—that way rather than remembering to add the authorization middleware to server functions, I'll be forced to specifically add public server functions to an allow list (or something like that).
Is there way to do this, or is there a better way I could be approaching this?...
`__filename is not defined` (Cloudflare Workers)
Anybody got any idea on how to investigate the error I receive w.r.t.:
...
{"stack":"ReferenceError: __filename is not defined\n at import_meta_url.js (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:2959:55)\n at __init (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:2929:60)\n at ../../node_modules/.pnpm/wrangler@4.14.1/node_modules/wrangler/wrangler-dist/cli.js (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:80439:5)\n at __require2 (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/chunk-OL46QLBJ.js?v=c86f4689:21:50)\n at http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:155875:16","message":"__filename is not defined"}
{"stack":"ReferenceError: __filename is not defined\n at import_meta_url.js (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:2959:55)\n at __init (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:2929:60)\n at ../../node_modules/.pnpm/wrangler@4.14.1/node_modules/wrangler/wrangler-dist/cli.js (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:80439:5)\n at __require2 (http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/chunk-OL46QLBJ.js?v=c86f4689:21:50)\n at http://localhost:3000/_build/node_modules/.vinxi/cache/client/deps/wrangler.js?v=c86f4689:155875:16","message":"__filename is not defined"}
ensureQueryData on loader breaks page.
Getting this error on the client console:
TRPCClientError: Unexpected token '<', "<!DOCTYPE html>" is not valid JSON
The loader uses ensureQueryData to use it as the page title:
...
Is beforeLoad expected to run on the server and the client?
I have a setup with a dynamic redirect based on locally stored user preferences (i.e. the server does not know about the redirect). My understanding was, that beforeLoad, like load is isomorphic and runs again on the client during hydration. However, in my testing it seems like, that beforeLoad only runs on the client, if the navigation was initiated on the client. If an URL is loaded for the first time, it looks like beforeLoad only runs on the server. Is this expected? And if yes, how can I put logic that has to run on the client before the actual page gets rendered?
This is a related question for loader: https://discord.com/channels/719702312431386674/1367003233523990538...
Accessing request object in the Route.loader
I would like to get access to request headers in the loader to get the IP address (to display that the service is not available in certain countries).
What is the proper way of getting access to the request object / headers in the loader?
I have tried adding
getHeader but that causes a build error....Routes conflicting when using "@tanstack/react-start/api"
I have a dynamic endpoint -
/api/$workspaceSlug/$projectSlug
And a static endpoint - /api/ai/chat
When I make a request to /api/ai/chat, the request is going to /api/$workspaceSlug/$projectSlug. It thinks* ai is the workspace slug and chat is the project slug, so it ends up returning the wrong response.
...Vinxi & Nitro
In this message: https://discord.com/channels/719702312431386674/1238170697650405547/1368552695388180602 it seems as though both Vinxi and Nitro will eventually be deprecated (the latter apparently only at runtime). While I understand Vinxi (since it's an extra layer too close to TSS) I don't understand why we should get rid of half of Nitro integrations and goodies (e.g. background jobs).
I thought Nitro (and the ecosystem of plugins) as a base was one of the main advantages of TSS over comparable solutions (e.g. Next). And it was touted as a great time saver which would enable contributors to work on things that actually matter DX wise as opposed to dealing with "low level" stuff that Nitro takes care of.
I'm wondering if there's a written rationale for this decision and I wonder if there's a better way to announce these major changes in direction for the future....
serverFn signal is always aborted on POST?
I have this server function:
```ts
export const getAgents = createServerFn({ method: "GET" }).handler(({ signal }) => {
console.log("aborted:", signal.aborted)
return listAgents()...
How to handle POST requests to component routes (non-api) and read the payload (form data, json)
I'm implementing an OAuth flow with Google and need a route that'll receive a POST request with the credentials payload. I have this currently working with an api route, but during payload verification some errors can throw that I want to present a nice UI for using the Error Boundaries I have for the rest of the application. I want to just have a regular route, but unsure how to access the form data from within either the loader or a server function.
In Remix/React Router, I could do this very easily like so:
```
// Handles the POST request from the Google OAuth callback...
Sharing data between `ws` implementation and `createServerFn` util
So I followed this guide https://nize.ph/blog/tanstack-start-websockets/ to implement websockets in my Start application, but I'm having some trouble being able to share data between the WS server, and some server-side routes created with
createServerFn. My goal is to have the ability to send a websocket message from a server function. The way I've tried to do this, is to create a Map() instance, in which I place websocket "peers", and then I'm attemting to retreive the appropriate peer from the server-side function. However, the Map isn't shared, it seems like the file where createServerFn is located, is loaded dynamically by Start, which means the Map is always a new instance rather than being the existing one.
TL;DR on code:
- src/lib/peerManager.ts exports a singleton export const peerManager = new PeerManager();
- src/ws.tsx imports the singleton, handles websocket, works great...path error with static server function.
I have the following error when using a static server function. Any static function. Making it dynamic fixes the problem.
```
TypeError: The "path" argument must be of type string. Received undefined...