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

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.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

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

Hi, ! Welcome to the Vercel Community

Thank you for your patience You could try the following:

Since it works in npm run dev, try:

rm -rf .next
npm clean-install
npm run build

Check your environment variables in production
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!