Getting a Pre-Render error when trying to deploy to Vercel

Question

I'm building a headless site that is using Wordpress as the cms. Using wpgraphql as a plugin. I'm running into a pre-render error/type error, when I try and upload my code to vercel. During the build production that is automatically done, it gives me the following error.

}
TypeError: Cannot read properties of undefined (reading 'toString')
    at /vercel/path0/.next/server/chunks/948.js:2:4371
    at /vercel/path0/.next/server/chunks/948.js:2:15874
    at a.with (/vercel/path0/.next/server/chunks/948.js:1:8878)
    at c.with (/vercel/path0/.next/server/chunks/948.js:1:3078)
    at c.startActiveSpan (/vercel/path0/.next/server/chunks/948.js:1:18133)
    at a.startActiveSpan (/vercel/path0/.next/server/chunks/948.js:1:18667)
    at /vercel/path0/.next/server/chunks/948.js:2:15407
    at a.with (/vercel/path0/.next/server/chunks/948.js:1:8878)
    at c.with (/vercel/path0/.next/server/chunks/948.js:1:3078)
    at b.trace (/vercel/path0/.next/server/chunks/948.js:2:15361) {
  digest: '2509559086'
}
Error occurred prerendering page "/how-it-works". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'toString')
    at /vercel/path0/.next/server/chunks/948.js:2:4371
    at /vercel/path0/.next/server/chunks/948.js:2:15874
    at a.with (/vercel/path0/.next/server/chunks/948.js:1:8878)
    at c.with (/vercel/path0/.next/server/chunks/948.js:1:3078)
    at c.startActiveSpan (/vercel/path0/.next/server/chunks/948.js:1:18133)
    at a.startActiveSpan (/vercel/path0/.next/server/chunks/948.js:1:18667)
    at /vercel/path0/.next/server/chunks/948.js:2:15407
    at a.with (/vercel/path0/.next/server/chunks/948.js:1:8878)
    at c.with (/vercel/path0/.next/server/chunks/948.js:1:3078)
    at b.trace (/vercel/path0/.next/server/chunks/948.js:2:15361)
 ✓ Generating static pages (7/7)
> Export encountered errors on following paths:
    /(routes)/how-it-works/page: /how-it-works
Error: Command "npm run build" exited with 1

The interesting thing, is while it's being run locally it doesn't have any issues. This includes running npm run build on my local machine. It runs and executes without any errors. The above error only happens when I'm uploading the code to Vercel.

Here's the code that's causing the issue to happen.

import styles from "./page.module.scss";

async function getPage() {
  const query = `
  query GetPostByUri {
    pageBy(uri: "distance-education/how-it-works/") {
        title
        content
        heroImage {
          heroImage {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
  }
      `;

  const res = await fetch(process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    next: {
      revalidate: 5,
    },
    body: JSON.stringify({ query }),
  });

  const responseBody = await res.json();

  if (responseBody && responseBody.data && responseBody.data.pageBy) {
    return responseBody.data.pageBy;
  } else {
    throw new Error("Failed to fetch the page");
  }
}

export default async function HowItWorks() {
  const page = await getPage();

  return (
    <div className={styles.wrapper}>
      <h1 className={styles.title}>{page.title}</h1>
      {page.heroImage.heroImage ? (
        <img
          src={page.heroImage.heroImage.node.sourceUrl}
          className={styles.heroImg}
          alt={page.heroImage.heroImage.node.altText}
        />
      ) : (
        <></>
      )}

      <div
        dangerouslySetInnerHTML={{ __html: page.content }}
        className={styles.content}
      />
    </div>
  );
}

Current file path is app > (routes) > how-it-works > page.js

From the testing I've done, the code uploads to Vercel just fine when it's in a dynamic path.

For instance file path would be app > (routes) > testing > academy > [uri] > page.js

However when the I follow the path on the live site it runs into the same error.

The Vercel Deployment is connected to my Github account, so anytime I push changes there it automatically does a new deployment, and when it tries to build during that deployment this is when the error occurs.

I can't figure out what is causing this to happen. Any help would be greatly appreciated!

Answer 1

After a lot of troubleshooting, I found that I needed to add the env variables to Vercel before deploying. This fixed the issue.