How to Fix: Generating static pages (0/8)TypeError: Cannot read properties of undefined (reading 'data')

When generating static pages in web development, developers often encounter errors that can hinder progress. One common error is the "TypeError: Cannot read properties of undefined (reading 'data')." This article aims to provide a comprehensive understanding of this error and offer effective solutions to resolve it. Through a real-life scenario and step-by-step guidance, we will explore the causes of this error and demonstrate how to fix it.

A few days ago, after I finished developing a side project I was working on, I pushed over to GitHub which is connected to Vercel. However, when Vercel started to run yarn build, I got an error: Generating static pages (0/8)TypeError: Cannot read properties of undefined (reading 'data')

What could be the problem? I asked myself. Do you know what happened next? I started to google.

Sadly, I didn't see enough material that addressed the issue, I was tired, I really wanted to build the application so I can see it live!

But hold on, why is the app working on my local machine, but not working when I run yarn build?

Understanding the Error:

The "TypeError: Cannot read properties of undefined (reading 'data')" error message typically occurs when a variable or object is accessed without being properly defined or initialized. In the context of generating static pages, this error commonly arises when there is an issue with the data being used or accessed during the page generation process.

Sound confusing? Don't be. Let's break it down.

In my case, I was trying to build a blog, and I have blog/[slug] page.

The error is always shown in the slug page, and that's because I was using getStaticPaths and I don't want all the blog posts to be rendered when the page is first rendered, after all, that'd slow down the page rendering and increase the loading time. I don't want that!

To make sure all the page static blog posts don't render when the page first loads, I did the following:

export async function getStaticPaths() {
  const client = createClient();

  const allPosts = await client.getAllByType('post');

  return {
    paths: allPosts.map((post) => post.url),
    fallback: true,
  };
}

This is where the error is, I asked the getStaticPaths to have a fallback:true.

Well, this is a good practice, I don't want to fetch all the blog posts from the server before the page loads, that will slow down the page!

But since fallback is true, I need to tell nextJs that

hey buddy, some of my blog posts are not fetched yet, so if the visitor should navigate to /blog/not-yet-found-post, don't return an error page immediately. Instead, try to run yarn build again to see if the post is on the server, if yes, render the post content, else return a 404.

Do You get the point now? The main issue in my case, I didn't ask Nextjs to first run yarn build if a visitor should navigate to /blog/not-yet-found-post.

According to next.js to resolve the issue is simply to import { useRouter } from 'next/router'; and use it to check if the page is falling back like so;

import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  return {
    // Only `/posts/1` and `/posts/2` are generated at build time
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // Enable statically generating additional pages
    // For example: `/posts/3`
    fallback: true,
  }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return {
    props: { post },
    // Re-generate the post at most once per second
    // if a request comes in
    revalidate: 1,
  }
}

export default Post

so by adding router.isFallback, I was able to fix the issue by first asking nextjs to in the background build the page, fetch the post the user is trying to access, and show it to them.

Conclusion

When generating static pages, encountering errors like "TypeError: Cannot read properties of undefined (reading 'data')" is not uncommon. However, with a systematic approach to understanding the error's origin and implementing the appropriate solutions, developers can overcome this issue effectively.
I hope that this blog post has helped you to understand and fix the error you're having Generating static pages (0/8)TypeError: Cannot read properties of undefined (reading 'data').

Let me know in the comments if it did help you, or you have any questions.

All the best!