Error occurred prerendering page when running yarn build

Hello,
When building the project with yarn build I get "Error occurred prerendering page", as the data from prismic is not loaded yet when nextJS tries to build the page. Based on my console logs this happens, because the data is loaded to late to the [page].js component. However when running in yarn dev all works well as router.isFallback is waiting for the data...

For reference here is the repository: GitHub - hejsfj/mateo-website

This is the code, which does the trouble:

import React from "react";
import { useRouter } from "next/router";
import Head from "next/head";
import ErrorPage from "next/error";
import Header from "../components/Header";
import Layout from "../components/layout";
import { getAllPagesWithSlug, getPage } from "../lib/api";
import SliceZone from "../components/SliceZone";

export default function Page({ preview, page }) {
  const router = useRouter();
  console.log("Page Data inside function Page" + page);
  console.log("Router Fallback status:" + router.isFallback);

  return (
    <Layout preview={preview}>
      <Header />
      {router.isFallback ? (
        <div className="container mx-auto px-5">Loading...</div>
      ) : (
        <>
          <Head>
            <title>MATEO</title>
          </Head>
          <SliceZone sliceZone={page.body}></SliceZone>
        </>
      )}
    </Layout>
  );
}

export async function getStaticPaths() {
  const allPages = await getAllPagesWithSlug();
  return {
    paths: allPages?.map(({ node }) => `/${node._meta.uid}`) || [],
    fallback: true,
  };
}

export async function getStaticProps({ params, preview = false, previewData }) {
  const data = await getPage(params.page, previewData);
  console.log("Data from getPage inside [page].js" + data);

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      preview,
      page: data?.page ?? null,
    },
  };
}

Inside api.js:

export async function getPage(slug, previewData) {
  console.log("API: Get Page Data");
  console.log("API Slug" + slug);
  console.log("API Preview" + previewData);
  const data = await fetchAPI(
    `
  query PageBySlug($slug: String!, $lang: String!) {
    page(uid: $slug, lang: $lang) {
      title
      body {
          __typename
          ...on PageBodyPlain_hero{
            type
            label
            primary{
              section_title
            }
          }
          ...on PageBodyText{
            type
            label
            primary{
              section_description
            }
          }
        }
      _meta {
        uid
      }
    }

  }
  `,
    {
      previewData,
      variables: {
        slug,
        lang: API_LOCALE,
      },
    }
  );
  return data;
}

Hi Sebastian,

Thank you for contributing to the Prismic community,

I will debug this issue and get back to you, meanwhile can you please provide us with your repository name that you are using to fetch the data from?

We are still investigating this issue.

In fact, we suspect that other pages are causing the issue on build time because when you do yarn build, Next.js fetch all the data for all the pages, unlike yarn dev, and there might be some pages with an error that makes the build fail.

@sebastian1 has figgerd out the solution:

It was a wrong language .env variable on Vercel... you have to select "plain-text" in order for the variable to render as en-de otherwise it will render as "en-de

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.