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

Help
1

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:

image
image1247×256 43.9 KB

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.

2

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.

3

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!