esanchezvz
esanchezvz6mo ago

Can't do server side data fetching with RSC.

Whenever I try to use a proxy client to fetch data in a React Server Component with Nextjs14, I get an error error: TRPCClientError: Unexpected token < in JSON at position 0 Likely trpc is returning HTML though I don't know why. Now if instead of fetching with a RSC, I trigger the data fetching via a "server action" I get the following error
TRPCClientError: fetch failed
at TRPCClientError.from (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+client@10.45.0_@trpc+server@10.45.0/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:43:16)
at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+client@10.45.0_@trpc+server@10.45.0/node_modules/@trpc/client/dist/httpUtils-b9d0cb48.mjs:132:81) {
meta: {},
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11) {
cause: _RequestContentLengthMismatchError: Request body length does not match content-length header
at write (node:internal/deps/undici/undici:8302:41)
at _resume (node:internal/deps/undici/undici:8276:33)
at resume (node:internal/deps/undici/undici:8173:7)
at connect (node:internal/deps/undici/undici:8162:7) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}
}
TRPCClientError: fetch failed
at TRPCClientError.from (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+client@10.45.0_@trpc+server@10.45.0/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:43:16)
at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+client@10.45.0_@trpc+server@10.45.0/node_modules/@trpc/client/dist/httpUtils-b9d0cb48.mjs:132:81) {
meta: {},
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11) {
cause: _RequestContentLengthMismatchError: Request body length does not match content-length header
at write (node:internal/deps/undici/undici:8302:41)
at _resume (node:internal/deps/undici/undici:8276:33)
at resume (node:internal/deps/undici/undici:8173:7)
at connect (node:internal/deps/undici/undici:8162:7) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}
}
The wierd thing is that when using client side fetching, via react query, everything works. I've looked at issues, docs, gpt but I can't seam to fix this error. I've looked at similar implementations like create-t3-app but nothing works so far. Not sure what I'm doing wrong. Some direction would be greatly appreciated. Here's a link to a repo that recreates this issue. https://github.com/esanchezvz/trpc-nextjs-express-turborepo
2 Replies
BillyBob
BillyBob5mo ago
Im doing something similar here: check it out. https://github.com/lwears/ReelScore
httpBatchLink({
url: 'http://<server>/trpc',
headers: Object.fromEntries(headers()),
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
httpBatchLink({
url: 'http://<server>/trpc',
headers: Object.fromEntries(headers()),
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
try this also maybe 'use server' at the top of /web/src/app/trpc/server.ts
esanchezvz
esanchezvz5mo ago
Thanks, got it working. Still don't know what caused the issue. But the fix was to move the trpc api url to an env variable, as importing the getBaseUrl and passing it as part of the string to url option for httpBatchLink and adding the 'use server' directive to it or /web/src/app/trpc/server.ts didn't work. But env variables works and is a better approach in imo. Thanks man!