A server-side exception has occurred - Syntax error on parsing a JSON

Hi!
I’ve been testing out Vercel to deploy a webpage I had and learn a thing or two.
But when I tried to deploy this project, I got a frontend error from Vercel on my custom domain.

It just says: Application error: a server-side exception has occurred (see the server logs for more information). Digest: 2922033705
This is currently viewable if you try to reach this domain/page

Checking out for Logs, I just get the following:

LOG ERRORS | Hosts divided:

Status and errors on the custom domain: GET 404

SyntaxError: Unexpected token 'I', "Infinite l"... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5682:19)
    at successSteps (node:internal/deps/undici/undici:5663:27)
    at fullyReadBody (node:internal/deps/undici/undici:4561:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async consumeBody (node:internal/deps/undici/undici:5672:7)
    at async getServerSideUser (/var/task/.next/server/chunks/870.js:1:98506)
    at async Navbar (/var/task/.next/server/chunks/870.js:1:59501)

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5682:19)
    at successSteps (node:internal/deps/undici/undici:5663:27)
    at fullyReadBody (node:internal/deps/undici/undici:4561:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async consumeBody (node:internal/deps/undici/undici:5672:7)
    at async getServerSideUser (/var/task/.next/server/chunks/870.js:1:98506)
    at async Navbar (/var/task/.next/server/chunks/870.js:1:59501)

Status and error on internal vercel domain: GET 500

SyntaxError: Unexpected token 'I', "Infinite l"... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5682:19)
    at successSteps (node:internal/deps/undici/undici:5663:27)
    at fullyReadBody (node:internal/deps/undici/undici:4561:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async consumeBody (node:internal/deps/undici/undici:5672:7)
    at async getServerSideUser (/var/task/.next/server/chunks/870.js:1:98506)
    at async Navbar (/var/task/.next/server/chunks/870.js:1:59501)

Unfortunately, since I’m just starting in web deploys, I don’t even know where to start looking for in order to solve this. I tried running this project locally, and at least with npm run dev it works fine, I havent tried any other way. Also, I got a friend of mine testing on another platform for web hosting, and it worked well by some reason.

Is there any idea on what could I do? Or at least on where to start looking for syntax errors?

My app uses: Next.js 14, React, tRPC and tailwind. Im using also Payload CMS.
Really appreciate any help.

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Hi, @asalas17! Welcome to the Vercel Community :smile:

Thank you for your patience :pray: You could try the following:

  1. Since it works in npm run dev, try:
rm -rf .next
npm clean-install
npm run build
  1. Check your environment variables in production
  2. Common causes:
    1. API routes mixing HTML and JSON responses
    2. tRPC procedures not properly serializing data
    3. Payload CMS configuration issues in production

Let us know how you get on!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.