tRPCttRPC
Powered by
esanchezvzE
tRPC•3y ago•
4 replies
esanchezvz

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
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
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
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

tRPC Query Invalidation Issue with Client-Side Data Fetching and Initial Data from server component
devianaDdeviana / ❓-help
16mo ago
`refetchOnWindowFocus` with RSC?
Jan HenningJJan Henning / ❓-help
3y ago
conditionally fetching data with a useQuery
PeformPPeform / ❓-help
2y ago
Can't get Server-Side Helpers NextJS example to work
Square0neSSquare0ne / ❓-help
3y ago