Vercel Build Error

Answered

Treeing Cur posted this in #help-forum

Treeing CurOP

2023-12-27T22:41:53.000Z

Hello guys, Im trying to deploy a next js project into vercel and im getting this build error:

SyntaxError: Unexpected token T in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:4553:19)
    at successSteps (node:internal/deps/undici/undici:4527:27)
    at fullyReadBody (node:internal/deps/undici/undici:1307:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:4536:7)
    at async I (/vercel/path0/.next/server/app/page.js:6:260876)
    at async W (/vercel/path0/.next/server/app/page.js:6:261888)

Im new to nextjs so im not really sure whats causing this issue:

im calling this fetch commands like this:

import { fetchPageInfo } from '@/utils/fetchPageInfo'
import { fetchProjects } from '@/utils/fetchProjects'
import { fetchSkills } from '@/utils/fetchSkills'
import { fetchExperience } from '@/utils/fetchExperience'
import { fetchSocials } from '@/utils/fetchSocials'

export default async function Home() {
  const pageInfo: PageInfo = await fetchPageInfo();
  const experience: Experience[] = await fetchExperience();
  const skills: Skill[] = await fetchSkills();
  const projects: Project[] = await fetchProjects();
  const socials: Social[] = await fetchSocials();

  return (
    <div className='bg-[rgb(36,36,36)] text-white h-screen snap-y snap-mandatory overflow-y-scroll overflow-x-hidden z-0 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]'>
      <Header socials={socials}/>

      {/* Hero */}
      <section id="hero" className='snap-start'>
        <Hero pageInfo={pageInfo
// rest of code

Answered by Ray

you should move the code from route handler, and just run it inside the server component

View full answer

18 Replies

@Treeing Cur Hello guys, Im trying to deploy a next js project into vercel and im getting this build error: SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:4553:19) at successSteps (node:internal/deps/undici/undici:4527:27) at fullyReadBody (node:internal/deps/undici/undici:1307:9) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async specConsumeBody (node:internal/deps/undici/undici:4536:7) at async I (/vercel/path0/.next/server/app/page.js:6:260876) at async W (/vercel/path0/.next/server/app/page.js:6:261888) Im new to nextjs so im not really sure whats causing this issue: im calling this fetch commands like this: import { fetchPageInfo } from '@/utils/fetchPageInfo' import { fetchProjects } from '@/utils/fetchProjects' import { fetchSkills } from '@/utils/fetchSkills' import { fetchExperience } from '@/utils/fetchExperience' import { fetchSocials } from '@/utils/fetchSocials' export default async function Home() { const pageInfo: PageInfo = await fetchPageInfo(); const experience: Experience[] = await fetchExperience(); const skills: Skill[] = await fetchSkills(); const projects: Project[] = await fetchProjects(); const socials: Social[] = await fetchSocials(); return ( <div className='bg-[rgb(36,36,36)] text-white h-screen snap-y snap-mandatory overflow-y-scroll overflow-x-hidden z-0 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]'> <Header socials={socials}/> {/* Hero */} <section id="hero" className='snap-start'> <Hero pageInfo={pageInfo // rest of code

Ray

2023-12-27T22:50:07.000Z

should be something fail to parse to json from your fetch function

@Ray should be something fail to parse to json from your fetch function

Treeing CurOP

2023-12-27T22:52:39.000Z

import { PageInfo } from "@/typings";

export const fetchPageInfo = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/getPageInfo`, { next: { revalidate: 3600 } });
    const data = await res.json();
    const pageInfo: PageInfo = data.pageInfo;
    return pageInfo;
};

Ray

2023-12-27T22:52:53.000Z

try comment out the fetch function, and only run once to see which is causing the error

you fetching your own api?

Treeing CurOP

2023-12-27T22:53:23.000Z

yes

Ray

2023-12-27T22:53:57.000Z

you shouldn't do that in server component

Ray

2023-12-27T22:54:22.000Z

you should move the code from route handler, and just run it inside the server component

Answer

Ray

2023-12-27T22:54:38.000Z

so you don't need to create separate route handler for data fetching

https://nextjs-faq.com/fetch-api-in-rsc

Treeing CurOP

2023-12-27T22:59:10.000Z

export async function GET() {
  try {
    const pageInfo: PageInfo = await sanityClient.fetch(query);
    return NextResponse.json({ pageInfo } as Data, {status: 200});
  } catch (error) {
    console.error(error);
    return NextResponse.json({ message: 'Error fetching data' }, {status: 500});
  }
}

so i dont need a route and just call the server side logic directly on my component?

@Treeing Cur oh export async function GET() { try { const pageInfo: PageInfo = await sanityClient.fetch(query); return NextResponse.json({ pageInfo } as Data, {status: 200}); } catch (error) { console.error(error); return NextResponse.json({ message: 'Error fetching data' }, {status: 500}); } } so i dont need a route and just call the server side logic directly on my component?

Ray

2023-12-27T22:59:53.000Z

yes

Treeing CurOP

2023-12-27T23:39:55.000Z

i see

still a lot to learn ðŸ‘€

it worked tho

thanks brother hope you have a nice day

Ray

2023-12-27T23:40:26.000Z

cool