is possible to combine next-minimal-starter with react-router-dom ?

Hi, I'm trying to combine https://github.com/trpc/trpc/tree/main/examples/next-minimal-starter and react-router for a spa like is described in https://colinhacks.com/essays/building-a-spa-with-nextjs and I'm getting xt-dev.js:20 TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at TRPCClientError.from (transformResult-6fb67924.mjs:13:1) at eval (httpBatchLink.mjs:211:48) . I tried with create-t3-app too which I got the same result. Do you think what I'm doing is feasible ? react-router 6.10 and next with trpc ?
Solution:
This means your backend is returning a HTML document, most likely the index.html page. It's very common with incorrectly set up web servers
GitHub
trpc/examples/next-minimal-starter at main · trpc/trpc
🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/examples/next-minimal-starter at main · trpc/trpc
Colin McDonnell @colinhacks
Building a single-page application with Next.js and React Router
Next.js is awesome. React Router is awesome. Why is it so hard to get them to play nice?
N
Nick365d ago
Unexpected token '<', "<!DOCTYPE "... is not valid JSON
Solution
N
Nick365d ago
This means your backend is returning a HTML document, most likely the index.html page. It's very common with incorrectly set up web servers
N
Nick365d ago
Make sure your API is sending requests to the right place, and that place isn't redirecting what it thinks is (or will be) a 404 back to index.html
G
geraldodev365d ago
async rewrites() { return [ // Rewrite everything else to use pages/index { source: '/:path*', destination: '/', }, ]; }, Could it be this rewrite rule causing this ? I've commented and got rid of the error. Thank you @Nick Lucas
G
geraldodev365d ago
in the context of the article , I've changed the rewrite to async rewrites() { return { fallback: [ // Rewrite everything else to use pages/index { source: '/:path*', destination: '/', }, ], } ; }, so it does not interfere with trpc endpoint and and triggers for local routes that does not exist on the server when refresh is called on the browser.
More Posts
using same query for entries appHow to use same query for many components? I don't want to request api for many times ;-; I can't pHow can I make a direct fetch on a router endpoint from TRPC in NextJS on client?In the documentation you can use the vanilla TRPC client like this: ``` const bilbo = await clientHow to get unwrapped errors out of proxy clientI'm using sveltekit and in order to redirect from SSR you need to throw an error: https://kit.sveltCan you get the queryClient without using a hook?Can you get the queryClient without using a hook?How can I reset the cursor when using useInfiniteQuery?I have various filters that I can set for the query, but when setting those filters I need to reset How does routing work in tRPC especially when using merged routers?I am having trouble understanding how tRPC lays out routes. Let's say I have the below ```typescripwhere is useQuery [key]?Learning trpc, i use to tanstack with queryKey, can not find how that works with trpc, if i want tuseInfinieQuery with initialData, Refetch only after second change of inputsHi everyone, I have the problem as stated in the title. My code looks like the following: ```ts Adding tRPC HOC breaks zustandIt seems that adding the trpc hoc breaks my zustand stores initial values and generates bad data. AfNext.js + tRPC, multitenancy, access Next.js Router when setting tRPC headersHey all! I'm writing a multi-tenant solution. Most Next.js pages lie under the `/pages/[tenantKey]/`getInfiniteData returns undefinedI am using the t3-stack. Whenever I am calling getInfiniteData it returns undefined. ``` console.loEnable both `useQuery` and a raw `query` from the frontend (for use in async validation)Hello everyone, some context: ``` . I'm building a project with a variant of the t3 stack (key pointNextjs http endpoint (no prisma)I have simple pages/api/todoEndpint how do i call this endpoint with trcp? I don't want to use prismAdding clerk auth object to createServerSideHelpersSo I followed clerk's docs for TRPC (https://clerk.com/docs/nextjs/trpc) and I added `auth` to the `Call retries were exceeded with ssgI'm running a `create-t3-app` on Node 18. Has anyone seen errors trying to use SSG with TRPC and PrHow does batching work in SSR & nextjs app directory?I'm currently playing with the app directory for nextjs. If I have a SSR client set up like this: `"This is likely not portable" errorRandomly started getting this weird error on my front end, can't find anything online on it. SomethiIntegrate third-party added endpoints into the router definition?Its would be cool but not too important, so I was wondering whether or not it would be possible to h