Theo's Typesafe Cult•9mo ago

vercel deployment failed

https://stackoverflow.com/questions/77204414/deployment-on-vercel-failed-with-export-encountered-errors-on-following-paths so basically just trying to deploy my new portfolio but the deployment is failing with an Error occurred prerendering page "/". i dunno why this is happenning even after reading the documentation

Stack Overflow

Deployment on vercel failed with "Export encountered errors on foll...

These are the logs of deployment Running "vercel build" Vercel CLI 32.3.1 Installing dependencies...

portfolionew@0.1.0 postinstall prisma generate

Environment variables loaded ...

14 Replies

Yiannis•9mo ago

What’s your index page like (/)? Maybe you rendering it as a component or something? https://nextjs.org/docs/messages/prerender-error

Prerender Error

Manshul•9mo ago

Manshul•9mo ago

this is what it looks like yeah i read that documentation but still dont know whats up

Yiannis•9mo ago

Your page.tsx

Manshul•9mo ago

Page.tsx

import Wrap from "@/components/wrapper/Wrap";

export default async function Home() {
  // const { locales, locale: activeLocale, defaultLocale } = router;
  return <Wrap />;
}

import Wrap from "@/components/wrapper/Wrap";

export default async function Home() {
  // const { locales, locale: activeLocale, defaultLocale } = router;
  return <Wrap />;
}

i can share the github repo if youd like to see in detail

Yiannis•9mo ago

Does it build locally if you do pnpm build?

Manshul•9mo ago

yeah no error during local build so what i did is that i commented out the project component where i am trying to render the project cards using database (mongodb) and retried the deployment and it was sucessfull so there must be an issue with that but i still cant figure it out

Chico•9mo ago

Is your dev server running when you build localy? Since you’re calling your own api route that doesn’t exist at build time

Manshul•9mo ago

i mean i made sure to replace the env variable like instead of local host since im deploying on vercel "https://myprojectname.vercel.app" something like this for base url while fetching api and all and also mentioned prisma client key and mongodb key

export async function getProjects() {
  const res = await fetch(process.env.BASE_URL + "/api/projects");
  if (!res.ok) {
    throw new Error("failed");
  }

  return res.json();
}

export async function getProjects() {
  const res = await fetch(process.env.BASE_URL + "/api/projects");
  if (!res.ok) {
    throw new Error("failed");
  }

  return res.json();
}

Chico•9mo ago

Yes I understand but it’s trying to fetch while building to make it a static page and that won’t work with the fetch call So it works locally if your dev server is running while trying to build and will fail on vercel

Manshul•9mo ago

damn... i didnt encounter this in the past so kinda confused so like ... how do i fetch it? add delay or something? i though async was already doing the whole promise thing sorry im kinda nub and recently got back in prog getStaticProps/getStaticPaths <= this thing?

Chico•9mo ago

That’s pages iirc not available in app anymore https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default maybe this helps

Rendering: Server Components

Learn how you can use React Server Components to render parts of your application on the server.

Manshul•9mo ago

damn looks like the things changed ok i will check it out thanks a lot!

Chico•9mo ago

You’re welcome

Gaming

Programming

vercel deployment failed