I’m running into a pre-render error, when I try and upload my code to vercel. I’m sure it’s probably something pretty small that I’m missing, but can’t figure out what I’m doing wrong. (Everything works perfectly fine when it’s being run locally)

Here’s the 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

Here’s my code that’s having the issue. I’m building this as a headless site that is using WordPress as the cms. Using wpgraphql as a plugin.

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();

  if (page) {
    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>
    );
  } else return <p>"No Content"</p>;
}

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

From the testing I’ve done, the code works just fine. It doesn’t have an issue when I put that exact code in a dynamic page.

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

From what I’ve been able to gather, the reason this doesn’t have the issue, is because of how the page is being pre-rendered.

Any help would really be appreciated!