TRPCClientError: fetch failed

Kkoko#1337

5/26/2023

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

JHJan Henning

10/23/2023

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.

Looking for more? Join the community!

tRPC

TRPCClientError: fetch failed

Join Server

tRPC

TRPCClientError: fetch failed

Join Server