TRPCClientError: fetch failed

I get the below error when createTRPCProxyClient runs on BE of a Next.JS app hosted on Vercel:
TRPCClientError: fetch failed
at TRPCClientError.from (file:///var/task/node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs:13:16)
at file:///var/task/node_modules/@trpc/client/dist/links/httpBatchLink.mjs:211:64 {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
cause: RequestContentLengthMismatchError: Request body length does not match content-length header
at AsyncWriter.end (node:internal/deps/undici/undici:10197:19)
at writeIterable (node:internal/deps/undici/undici:10107:16)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}
}
TRPCClientError: fetch failed
at TRPCClientError.from (file:///var/task/node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs:13:16)
at file:///var/task/node_modules/@trpc/client/dist/links/httpBatchLink.mjs:211:64 {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
cause: RequestContentLengthMismatchError: Request body length does not match content-length header
at AsyncWriter.end (node:internal/deps/undici/undici:10197:19)
at writeIterable (node:internal/deps/undici/undici:10107:16)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}
}
I've been struggling for a while, and have no clue what's going on. Anybody experienced something similar? It seems to be coming from undici polyfilling fetch for node, but that's as far as I can go before the guessing game begins. This is not happening locally
JH
Jan Henning177d ago
This thread is one of the top results when googling for UND_ERR_REQ_CONTENT_LENGTH_MISMATCH, so thought I'd add my fix to this as I recently encountered it myself. Using Next.js app router.
"next": "^13.5.6",
"@trpc/client": "^10.41.0",
"@trpc/next": "^10.41.0",
"@trpc/react-query": "^10.41.0",
"@trpc/server": "^10.41.0"
"next": "^13.5.6",
"@trpc/client": "^10.41.0",
"@trpc/next": "^10.41.0",
"@trpc/react-query": "^10.41.0",
"@trpc/server": "^10.41.0"
First, install fetch-ponyfill.
yarn add fetch-ponyfill
yarn add fetch-ponyfill
Then update your httpBatchStreamLink by adding fetch: fetchPonyfill().fetch.
// trpc/server.ts
import fetchPonyfill from "fetch-ponyfill"

export const api = createTRPCProxyClient<AppRouter>({
transformer,
links: [
loggerLink({
enabled: op =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error)
}),
unstable_httpBatchStreamLink({
url: getUrl(),
fetch: fetchPonyfill().fetch, // <= add this line
headers() {
const heads = new Map(headers())
heads.set("x-trpc-source", "rsc")
return Object.fromEntries(heads)
}
})
]
})
// trpc/server.ts
import fetchPonyfill from "fetch-ponyfill"

export const api = createTRPCProxyClient<AppRouter>({
transformer,
links: [
loggerLink({
enabled: op =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error)
}),
unstable_httpBatchStreamLink({
url: getUrl(),
fetch: fetchPonyfill().fetch, // <= add this line
headers() {
const heads = new Map(headers())
heads.set("x-trpc-source", "rsc")
return Object.fromEntries(heads)
}
})
]
})
This solved the issue for me. Hopefully this is resolved in the future and will no longer be necessary to ponyfill.