How to solve Vercel 500 Internal Server Error?

Question

I have created a project that uses MongoDB to store user info and Next-Auth to authenticate users. On local host this is all working seamlessly. Previously I had a couple errors with my next-auth config, but that seems to be working fine now on Vercel live site. Once the user logs in they are redirected to "my-project/suggestions". On this page I am using getServerSideProps to identify if there is a valid session token. If so, data is pulled from a local json file.

On the live site, when the user logs in, the page is redirected to "/suggestions", yet I am receiving an 500 Internal Server Error page. On the function logs I am getting this error message:

[GET] /_next/data/KpsnuV9k44lUAhQ-0rK-B/suggestions.json
10:10:57:12
2022-05-05T14:10:59.270Z    5b7a7375-045f-4518-864b-7968c3c9385f    ERROR   [Error: ENOENT: no such file or directory, open '/var/task/public/data/data.json'] {
  errno: -2,
  syscall: 'open',
  path: '/var/task/public/data/data.json',
  page: '/suggestions'
}
RequestId: 5b7a7375-045f-4518-864b-7968c3c9385f Error: Runtime exited with error: exit status 1
Runtime.ExitError

This is my first project using MongoDB and Next-Auth.. not so sure what the issue is in this case. In my .env.local file I only have these two variables:

NEXTAUTH_SECRET="MUNKNATION" NEXTAUTH_URL=http://localhost:3000

How I am pulling the data on local host:

export const getServerSideProps = async (context) => {
  const session = await getSession({ req: context.req });

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  } else {
    let filePath = path.join(process.cwd(), "public", "data", "data.json");

    let jsonData = await fs.readFile(filePath);

    const data = JSON.parse(jsonData);

    const inProgressStatusData = data.productRequests.filter(
      (item) => item.status == "in-progress"
    );

    const liveStatusData = data.productRequests.filter(
      (item) => item.status == "live"
    );

    const plannedStatusData = data.productRequests.filter(
      (item) => item.status == "planned"
    );

    let filterData = filteredData(data, "suggestion");

    let feedbackData = {
      suggestions: filterData,
      progress: inProgressStatusData,
      planned: plannedStatusData,
      live: liveStatusData,
    };

    return {
      props: { session, feedbackData },
    };
  }
};

Folder structure:

Answer 1

A simple solution to this problem would be to, inside of your getServerSideProps, instead of calling readFile use readFileSync as follows:

export const getServerSideProps = async (context) => {
...
    const file = readFileSync(
      join(process.cwd(), "public", "data", "data.json"),
      "utf8"
    );
    const data = JSON.parse(fileData);
...

I have tested this solution with Vercel and it works correctly, in development and production mode.