Theo's Typesafe Cult•3mo ago

Vercel deployment: [cause]: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

I'm unsure where the error lies, but I'm getting [cause]: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON During deployments on Vercel. This happens during the Generate Static Asssets step.

   Generating static pages (3/4) 
getBaseUrl https://t3-personal-ghaf0nwa3-xxx-projects.vercel.app
 << query  #1 entry.getAll  {

   Generating static pages (3/4) 
getBaseUrl https://t3-personal-ghaf0nwa3-xxx-projects.vercel.app
 << query  #1 entry.getAll  {

I think this comes from:

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

This function getting VERCEL_URL while it's not available when making the tRPC call. I know because it's actually not hitting the tRPC backend and failing before that. What I don't understand is why is this not an issue for everyone?

6 Replies

m1awOP•2mo ago

So I can reproduce this on the base create t3 app. Why does removing

  const hello = await api.post.hello({ text: "from tRPC" });

  const hello = await api.post.hello({ text: "from tRPC" });

Cause the server to crash on build? What in the world is happening here? Fuck sake i'ts the await ins't it?

Neto•2mo ago

The requests expected json but got html Some middleware is either redirecting or sending html back when it should have json as a return

Ahmed Senousy•2mo ago

@m1aw can you show me you root layout.tsx? sometimes if you wrap ur root html tag with a provider like trpc provider or any other it crashes like this

m1awOP•2mo ago

Oh This is the root provider that's default with t3

<html lang="en" className={`${GeistSans.variable}`}>
      <body>
        <TRPCReactProvider>{children}</TRPCReactProvider>
      </body>
    </html>

<html lang="en" className={`${GeistSans.variable}`}>
      <body>
        <TRPCReactProvider>{children}</TRPCReactProvider>
      </body>
    </html>

What are you menat to do instead?

Ahmed Senousy•2mo ago

well... my suspicions were wrong 😅 you are doing it correctly

m1awOP•2mo ago

Yeah, couldn't figure out what was going on, might open a bug report later, since I can reproduce on the t3 setup by default. No idea tbh, but for now just making a random tRPC request before fixes the issues so that's what we are going to roll with.

Gaming

Programming

Vercel deployment: [cause]: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON