Skip to content
🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Get help on Slack

Troubleshooting undefined post properties error in Next.js with fallback: true

9 replies
Last updated: Jun 28, 2022
I am not sure what I changed (not sure I even did) but I have these two queries
export const postQuery = groq`
  {
    'post': *[_type == "post" && slug.current == $slug] | order(_updatedAt desc)[0] {
      ${postFields}
    }
  }
`

export const postSlugsQuery = `
*[_type == "post" && defined(slug.current)][].slug.current
`
and then they are used in my 
[slug].tsx
like so
export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await sanityClient.fetch(postSlugsQuery)

  return {
    paths: posts.map((slug: string) => ({ params: { slug } })),
    fallback: true,
  }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (!params) throw new Error('No path parameters found')

  const { slug } = params
  const { post } = await sanityClient.fetch(postQuery, { slug })

  if (!post) {
    return {
      notFound: true,
      revalidate: 10,
    }
  }

  return {
    props: {
      post,
    },
    revalidate: 3600,
  }
}
However, it is like a ghost post is showing up because I get

Error occurred prerendering page "/[slug]". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: Cannot read properties of undefined (reading 'mainImage')
    at Post (/Users/jamessingleton/Code/Projects/redshirt-sports/.next/server/pages/[slug].js:44:40)
    at Wc (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
Anyone have any ideas on troubleshooting this?
Jun 26, 2022, 5:23 PM
So putting a 
posts.map((post: Post) => console.log(post.slug))
in the 
getStaticPaths
returns a lot of undefined 🤔
Jun 26, 2022, 5:26 PM
I think the main problem is probably in your render. You’re trying to read 
.mainImage
somewhere.
Jun 26, 2022, 5:28 PM
Yes but my posts have a mainImage
Jun 26, 2022, 5:28 PM
I’d put a console.log before returning the 
post
in 
getStaticProps
. You probably have an incomplete post. Maybe a draft?
Jun 26, 2022, 5:29 PM
So that’s why I'm confused. It says it generated 54/54 pages but errors out 😔
Jun 26, 2022, 5:29 PM
Nope no draft posts
Jun 26, 2022, 5:30 PM
If I comment it mainImage it just goes to the next item I'm reading from post
Jun 26, 2022, 5:31 PM
user F
I figured it out 🤦 for some reason if I have 
fallback: true
it fails but having 
fallback: 'blocking'
enables it to build
Jun 27, 2022, 3:18 PM
Ah yes, that makes a lot of sense. 
fallback: true
means “render the component without props until we get them from the client“, hence why it fails on reading post properties.
Jun 28, 2022, 7:14 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?