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.