esanchezvz•7mo 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•7mo 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•7mo 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!