Theo's Typesafe Cult•2y ago

tRPC failing on static pages (app router) build on Vercel

When deploying my Next.js app on Vercel (using v13 app router), I come across an error I struggle with during the build phase, when tRPC attempts to retrieve the first data. I assume the error comes from the API endpoint that exists but fails to execute (else I have another error when NEXT_PUBLIC_VERCEL_URL is wrong, when I try to log the request, nothing shows). I added logs (lines starting with ###...) and can notice that the URL is good. It works well on my machine if I set NEXT_PUBLIC_VERCEL_URL to localhost, I can only reproduce on Vercel. Any idea why on Vercel my API endpoint doesn't work well during static pages generation?

- info Collecting page data...
- info Generating static pages (0/4)
- info Generating static pages (1/4)
###################### URL https://***.vercel.app/api/trpc
###################### URL https://***.vercel.app/api/trpc
- info Generating static pages (2/4)
- info Generating static pages (3/4)
 << query  #1 travel.getCurrentTravel  {
  input: undefined,
  result: TRPCClientError: Unexpected token < in JSON at position 0
      at TRPCClientError.from (/vercel/path0/.next/server/chunks/41.js:26142:16)
      at /vercel/path0/.next/server/chunks/41.js:26293:36 {
    meta: { response: [Response] },
    shape: undefined,
    data: undefined,
    [cause]: SyntaxError: Unexpected token < in JSON at position 0
        at JSON.parse (<anonymous>)
        at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)
        at successSteps (node:internal/deps/undici/undici:6545:27)
        at node:internal/deps/undici/undici:1211:60
        at node:internal/process/task_queues:140:7
        at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
        at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
  },
  elapsedMs: 562
}

- info Collecting page data...
- info Generating static pages (0/4)
- info Generating static pages (1/4)
###################### URL https://***.vercel.app/api/trpc
###################### URL https://***.vercel.app/api/trpc
- info Generating static pages (2/4)
- info Generating static pages (3/4)
 << query  #1 travel.getCurrentTravel  {
  input: undefined,
  result: TRPCClientError: Unexpected token < in JSON at position 0
      at TRPCClientError.from (/vercel/path0/.next/server/chunks/41.js:26142:16)
      at /vercel/path0/.next/server/chunks/41.js:26293:36 {
    meta: { response: [Response] },
    shape: undefined,
    data: undefined,
    [cause]: SyntaxError: Unexpected token < in JSON at position 0
        at JSON.parse (<anonymous>)
        at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)
        at successSteps (node:internal/deps/undici/undici:6545:27)
        at node:internal/deps/undici/undici:1211:60
        at node:internal/process/task_queues:140:7
        at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
        at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
  },
  elapsedMs: 562
}

1 Reply

BenjaminOP•2y ago

Anyway, I'll drop tRPC until they officially support App Router... 😅

Gaming

Programming

tRPC failing on static pages (app router) build on Vercel