Deploying Next.js to Vercel gives Error, ENOENT: no such file or directory, stat

Viewed 502

I have a Next.js project when I deploy to Heroku there is no error an application works correctly however when I want to deploy the application in Vercel at the end it gives such an error.

Vercel Error at the end of deployment

project structure

and this [...params].js file:

// ...params.js
import React, { useMemo, useState } from "react";
import { useRouter } from "next/router";
import MainLayout from "../../common/components/templates/GeneralTemplate";
import DashboardLayout from "../../common/components/templates/DashboardTemplate";
import LicensedPros from "../../common/components/infopages/licensedPros/LicensedPros";
import absoluteUrl from "next-absolute-url";
import { getSession } from "next-auth/react";
import StepFive from "../../common/components/register/StepFive";
import StepFouth from "../../common/components/register/StepFouth";
import StepThree from "../../common/components/register/StepThree";
import StepTwo from "../../common/components/register/StepTwo";
import StepSixth from "../../common/components/register/StepSixth";

const ApplicantType = ({ data, describeData }) => {
const router = useRouter();
const [type] = router.query.params;
const [index, setIndex] = useState(0);
const nextPage = () => {
  if (index + 1 === 6) {
    router.push("/discovery");
    return;
  }
   setIndex(index + 1);
   // ️ scroll to top on page load
   window.scrollTo({ top: 0 });
 };
   let ApplicationForm = (
    <>
     <div className="container mx-auto grid justify-items-center ">
       <LicensedPros
        serverData={data}
        describeData={describeData}
        edit={false}
        nextPage={nextPage}
      />
    </div>
   </>
);

 const renderPages = useMemo(() => {
   console.log(index);
  if (index === 0) {
     return <StepSixth setStep={nextPage} userType="licensed professionals" />;
   }
  if (index === 1) {
    return ApplicationForm;
   }
  if (index === 2) {
    return <StepFive setStep={nextPage} userType="licensed professionals" />;
  }
  if (index === 3) {
    return <StepFouth setStep={nextPage} type="applicants" />;
  }
if (index === 4) {
  return <StepThree setStep={nextPage} />;
}
return <StepTwo setStep={nextPage} userType="licensed professionals" />;
}, [index]);

 if (type === "info-page") {
   return (
     <MainLayout>
       <> {renderPages}</>
     </MainLayout>
   );
}
if (type === "edit") {
  return (
    <DashboardLayout headerTitle={"APPLICANTS EDIT INFO"}>
      <div className="container mx-auto grid justify-items-center ">
        <LicensedPros
           serverData={data}
           edit={true}
           describeData={describeData}
         />
      </div>
      </DashboardLayout>
  );
 }
 return <div></div>;
};

 export default ApplicantType;

export async function getServerSideProps(context) {
  const session = await getSession(context);
   if (session && session?.user?.type) {
     const { origin } = absoluteUrl(context.req);
    try {
       await fetch(`${origin}/api/mail/signup`, {
       method: "POST",
       mode: "same-origin",
       credentials: "include",
       headers: {
         "Content-Type": "application/json",
      },
      body: JSON.stringify(session),
    });
  const req = await fetch(`${origin}/api/info-page`, {
    method: "POST",
    body: JSON.stringify({ token: session?.jwt }),
  });
  const data = await req.json();

  //get user describe options
  const describe = await fetch(`${origin}/api/describe-you`, {
    method: "POST",
    body: JSON.stringify({ token: session?.jwt, type: "applicant" }),
  });
  const { describeData } = await describe.json();
  return {
    props: {
      data: data,
      describeData: describeData.data,
    }, // will be passed to the page component as props
  };
} catch (err) {
  return {
    props: {
      data: [],
      describeData: [],
    }, // will be passed to the page component as props
  };
}
} else {
  return {
     redirect: {
       destination: "/",
      },
    };
   }
}

To put all in all I can deploy the project in Heroku and works as I expected however in vercel gives that error which I mentioned and references this file as an error, I would appreciate any help thanks in advance.

0 Answers
Related