Skip to content
Get help on SlackWatch Sanity demo

Error with mapping posts in Next.js and Sanity project, TypeError: Cannot read property 'title' of undefined.

36 replies
Last updated: May 9, 2022
Hello! Learning Sanity here, in a Next project - and I've followed this post/tutorial exactly: https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js Problem is that this part, mapping all the posts, using the exact code https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js#1da9df69a1f7 - does not output the posts. I get 
TypeError: Cannot read property 'title' of undefined
at best, and a 
zsh: bus error  npm run dev
at worst. Where do I start? What is it I'm getting wrong?
May 6, 2022, 2:14 PM
Can you share a dump of the error with the exact trace? Or a screenshot maybe? It looks like there is a 
.title
or 
{ title } =
done on an undefined value somewhere.
May 6, 2022, 2:35 PM
I double checked now copy-pasting the exact code from the tutorial into a clean page. It does not seem to generate a response in the network tab, unlike direct slug-urls for single articles. This is the error msg I'm getting:

TypeError: Cannot read property 'title' of undefined

29 | const Post = ({post}) => {

30 |   const {

> 31 |     title = 'Article Title',

|    ^

32 |     name = 'Name placeholder',

33 |     categories,
May 6, 2022, 4:18 PM
As far as I can see, I have the same code as the tutorial..
May 6, 2022, 4:18 PM
What’s below line 33 please? Because the 
title
property is cherry-picked from an object, and that object is actually 
undefined
.
May 6, 2022, 4:20 PM
The error started appearing in this exact code:

import Link from 'next/link'
import groq from 'groq'
import client from '../client'

const Index = ({posts}) => {
    return (
      <div>
        <h1>Welcome to a blog!</h1>
        {posts.length > 0 && posts.map(
          ({ _id, title = '', slug = '', publishedAt = '' }) =>
            slug && (
              <li key={_id}>
                <Link href="/post/[slug]" as={`/post/${slug.current}`}>
                  <a>{title}</a>
                </Link>{' '}
                ({new Date(publishedAt).toDateString()})
              </li>
            )
        )}
      </div>
    )
}

export async function getStaticProps() {
    const posts = await client.fetch(groq`
      *[_type == "post" && publishedAt < now()] | order(publishedAt desc)
    `)
    return {
      props: {
        posts
      }
    }
}

export default Index
May 6, 2022, 4:32 PM
But it's now all over the place .. seems to be something related to babel or node.. getting all kinds of errors now. Will try npm install etc and get back to you if it persists!
May 6, 2022, 4:33 PM
Ok... fixed the babel/npm issue. Now the error is back. I get a feeling the errormsg is unrelated to the missing response from client.fetch.
May 6, 2022, 4:38 PM
I have a temp.js that where I have the exact tutorial code just to test. There is no response in the network tab of devtools. Code looks like this:

import Link from 'next/link'
import groq from 'groq'
import client from '../../client'

const Index = ({posts}) => {
    return (
      <div>
        <h1>Welcome to a blog!</h1>
        {posts.length > 0 && posts.map(
          ({ _id, title = '', slug = '', publishedAt = '' }) =>
            slug && (
              <li key={_id}>
                <Link href="/post/[slug]" as={`/post/${slug.current}`}>
                  <a>{title}</a>
                </Link>{' '}
                ({new Date(publishedAt).toDateString()})
              </li>
            )
        )}
      </div>
    )
}

export async function getStaticProps() {
    const posts = await client.fetch(groq`
      *[_type == "post" && publishedAt < now()] | order(publishedAt desc)
    `)
    return {
      props: {
        posts
      }
    }
}

export default Index
May 6, 2022, 4:39 PM
I get this error msg for [slug].js:
TypeError: Cannot read property 'title' of undefined
    at Post (webpack-internal:///./pages/news/[slug].js:53:13)
Even though [slug].js produces expected output when I query it. I don't know if these two errors are related?
May 6, 2022, 4:41 PM
Can I provide more context or do you have a clue for me?
May 6, 2022, 4:42 PM
What’s the exact line 53 in pages/news/[slug].js please?
May 6, 2022, 4:45 PM
</article>
May 6, 2022, 4:45 PM
😅
May 6, 2022, 4:46 PM
😄 yup.. not much help unfortunately.
May 6, 2022, 4:46 PM
Can you console log 
posts
in the 
getStaticProps
function? Does it look okay?
May 6, 2022, 4:46 PM
I tried that but that actually crashed the whole app. .. I'll try again now and see what I get..
May 6, 2022, 4:47 PM
... there's something very strange going on here..
May 6, 2022, 4:49 PM
Wait, if you put a console log in 
getStaticProps
, it shows up in your terminal window, not in your browser console. 
getStaticProps
runs on the server, not in the client. 🙂
May 6, 2022, 4:50 PM
Ah! I did not know. New to Next also:) This looks very ... undefined?
May 6, 2022, 4:53 PM
Okay, so you have no posts. Getting closer.
May 6, 2022, 4:54 PM
Can you share a screenshot of the 
getStaticProps
function in full? 🙂
May 6, 2022, 4:55 PM
But doing the same on the [slug].js page looks right.. any guesses on where this takes us?
May 6, 2022, 4:55 PM
Can we simplify the query to this one? Just to remove moving pieces here.
*[_type == "post"] { ... }
May 6, 2022, 4:56 PM
export async function getStaticProps() {
    const posts = await client.fetch(groq`
      *[_type == "post" && publishedAt < now()] | order(publishedAt desc)
    `);
    console.log(posts);
    return {
      props: {
        posts
      }
    }
}
May 6, 2022, 4:56 PM
Looking okay. Do you have some code on a repository somewhere maybe? Seeing the full picture would help. 🙂
May 6, 2022, 4:57 PM
...Now this also... there is no '1' in the code,,?
May 6, 2022, 5:12 PM
I can upload later tonight.. have to take a break.
May 6, 2022, 5:13 PM
If I try this in my terminal:

% sanity documents query "*[_type == 'post']{_id, title}"

I get this error:


Error: Command "documents" is not available outside of a Sanity project context.
Run the command again within a Sanity project directory, where "@sanity/core"
is installed as a dependency.
    at _.runCommand (/opt/homebrew/lib/node_modules/@sanity/cli/bin/sanity-cli.js:3614:1340)
    at t.exports (/opt/homebrew/lib/node_modules/@sanity/cli/bin/sanity-cli.js:1986:2422)
May 6, 2022, 8:18 PM
This is in my root project folder for my frontend.. should not sanity be available here?
May 6, 2022, 8:19 PM
In the template, which is also in the feed of posts js file, this 'getStaticProps' does not take an input - in the [slug].js it's 'context' - could that be it?
export async function getStaticProps() {
    const posts = await client.fetch(groq`
      *[_type == "post" && publishedAt < now()] | order(publishedAt desc)
    `);
    console.log(posts);
    return {
      props: {
        posts
      }
    }
}

May 7, 2022, 8:24 AM
This one doesn’t need an input because the path is probably 
/pages/posts.js
so there is no need for route parameter to figure out what to return. 🙂
May 7, 2022, 8:27 AM
That I do not get.. ? Why is that? Path is /pages/news/index.js ..or temp.js(for the exact tutorial code)..
May 7, 2022, 10:03 AM
Seems to connect to groq import just fine though,
May 7, 2022, 10:03 AM
..embaressing. It was a missing date in my posts, as explicitly warned about in the tutorial! Thanks for helping
user F
!:)
May 9, 2022, 2:44 PM
Oooh, interesting.
May 9, 2022, 2:47 PM
Glad you figured it out!
May 9, 2022, 2:47 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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 startedWatch demo

Was this answer helpful?

Categorized in