esanchezvz Posts

esanchezvz

•Created by esanchezvz on 1/16/2024 in #❓-help

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

5 replies