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

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

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

[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  {

   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}`;
}

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?

m1awOP•9/20/24, 10:33 PM

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?

m1awOP•9/20/24, 10:37 PM

Fuck sake i'ts the await ins't it?

Neto•9/20/24, 11:48 PM

The requests expected json but got html

Neto•9/20/24, 11:49 PM

Some middleware is either redirecting or sending html back when it should have json as a return

Ahmed Senousy•9/21/24, 6:51 AM

@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•9/21/24, 8:41 PM

AAhmed Senousy @m1aw can you show me you root layout.tsx? sometimes if you wrap ur root html ta...

m1awOP•9/21/24, 8:42 PM

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>

m1awOP•9/21/24, 8:42 PM

What are you menat to do instead?

Ahmed Senousy•9/22/24, 6:58 AM

well... my suspicions were wrong

Ahmed Senousy•9/22/24, 6:58 AM

you are doing it correctly

AAhmed Senousy well... my suspicions were wrong 😅

m1awOP•9/22/24, 7:48 PM

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.

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

Similar Threads

Similar Threads

Similar Threads