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 ?
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?
Solution:Jump to 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
5 Replies
Unexpected token '<', "<!DOCTYPE "... is not valid JSONSolution
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
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
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 Lucasin 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.