Using gatsby-plugin-image causes error: can't access property "image" #34164

Isaac-Tait · 2021-12-01T20:56:26Z

Isaac-Tait
Dec 1, 2021

I have a blog template that I would like to display a single image from the blog post beside the frontmatter (slug, date, title, excerpt). However, I keep getting this error:

can't access property "image", data.allMdx.frontmatter is undefined

Here is my blog-post-list.js template:

import React from "react";
import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import Header from "../components/header";
import Pager from "../components/pager";
import Footer from "../components/footer";

const BlogPosts = ({ data, pageContext }) => {
const image = getImage(data.allMdx.frontmatter.image)

    return (
        <div className="bg-gradient-to-r from-yellow-400 via-red-200 to-indigo-200">
          <Header />
            <div className="h-screen grid place-content-center">
              <div className="max-w-6xl md:mx-auto">
                {
                  data.allMdx.nodes.map((node) => (
                    <div className="flex justify-center align-middle">
                      <article key={node.id}>
                      <div className="text-pink-800 underline hover:text-indigo-400 text-4xl mt-2">
                        <Link to={node.slug}>
                          {node.frontmatter.title}
                        </Link>
                      </div>
                      <GatsbyImage 
                          image={image}
                          alt={data.frontmatter.imageAlt}
                      />
                        <p className="text-gray-600">Posted: {node.frontmatter.date}</p>
                        <p className="ml-4 italic text-gray-700">{node.excerpt}</p>
                      </article>
                    </div>
                  ))
                }
                <div>
              <Pager pageContext={pageContext} />
              </div>
                
              </div>
            </div>
          <Footer />
        </div>
    );
}

export default BlogPosts;

export const query = graphql`
  query ($skip: Int!, $limit: Int!){
    allMdx(
      sort: {fields: frontmatter___date, order: DESC}
      skip: $skip 
      limit: $limit
      ) {
        nodes {
      excerpt
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        imageAlt
        image {
          childImageSharp {
            gatsbyImageData(layout: CONSTRAINED)
          }
        }
      }
      id
      slug
    }
    }
  }
`

If I remove the GatsbyImage code then the page loads fine... I am following the official documentation, which can be found here

Any pointer/guidance would be greatly appreciated. Thank you.

Answered by violy

Dec 2, 2021

You probably missed one thing in your code.
You try to source an image in a bad scope on a undefined object.

You should source your images in the post loop — in map() function scope

data.allMdx.nodes.map((node) => (

something like this :

// ...
{
data.allMdx.nodes.map((node, key) => {
  const {frontmatter} = node
  const image = getImage(frontmatter.image) 
  return (
  <div className="flex justify-center align-middle" key={key}> 
  {/* ... */}
      <GatsbyImage image={image} alt={frontmatter.imageAlt} />
  {/* ... */}
  </div>
  )}
}

View full answer

violy · 2021-12-02T14:52:03Z

violy
Dec 2, 2021

You probably missed one thing in your code.
You try to source an image in a bad scope on a undefined object.

You should source your images in the post loop — in map() function scope

data.allMdx.nodes.map((node) => (

something like this :

// ...
{
data.allMdx.nodes.map((node, key) => {
  const {frontmatter} = node
  const image = getImage(frontmatter.image) 
  return (
  <div className="flex justify-center align-middle" key={key}> 
  {/* ... */}
      <GatsbyImage image={image} alt={frontmatter.imageAlt} />
  {/* ... */}
  </div>
  )}
}

0 replies

Isaac-Tait · 2021-12-03T15:29:15Z

Isaac-Tait
Dec 3, 2021
Author

That was it! Thank you @violy very very much 🤩 🥳. My updated code now looks like this:

import React from "react";
import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import Header from "../components/header";
import Pager from "../components/pager";
import Footer from "../components/footer";

const BlogPosts = ({ data, pageContext }) => {

    return (
        <div className="bg-gradient-to-r from-yellow-400 via-red-200 to-indigo-200">
          <Header />
            <div className="h-screen grid place-content-center">
              <div className="max-w-6xl md:mx-auto">
                {
                  data.allMdx.nodes.map((node) => {
                    const {frontmatter} = node
                    const image = getImage(frontmatter.image)
                    return (
                      <div className="flex justify-center align-middle">
                        <article key={node.id}>
                        <div className="text-pink-800 underline hover:text-indigo-400 text-4xl mt-2">
                          <Link to={node.slug}>
                            {node.frontmatter.title}
                          </Link>
                        </div>
                          <GatsbyImage 
                              image={image}
                              alt={frontmatter.imageAlt}
                              className="w-1/4 mt-2"
                          />
                        <p className="text-gray-600">Posted: {node.frontmatter.date}</p>
                        <p className="ml-4 italic text-gray-700">{node.excerpt}</p>
                      </article>
                    </div>
                    )}
                  )
                }
                <div>
              <Pager pageContext={pageContext} />
              </div>  
              </div>
            </div>
          <Footer />
        </div>
    );
}

export default BlogPosts;

export const query = graphql`
  query ($skip: Int!, $limit: Int!){
    allMdx(
      sort: {fields: frontmatter___date, order: DESC}
      skip: $skip 
      limit: $limit
      ) {
        nodes {
      excerpt
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        imageAlt
        image {
          childImageSharp {
            gatsbyImageData(layout: CONSTRAINED)
          }
        }
      }
      id
      slug
    }
    }
  }
`

0 replies

Isaac-Tait · 2021-12-03T15:44:37Z

Isaac-Tait
Dec 3, 2021
Author

As an extra perk it also cleared up my Netlify Build errors!

Page data from page-data.json for the failed page "/blog/2": {
4:15:24 PM:   "componentChunkName": "component---src-templates-blog-post-list-js",
4:15:24 PM:   "path": "/blog/2",
4:15:24 PM:   "result": {
4:15:24 PM:     "data": {
4:15:24 PM:       "allMdx": {
4:15:24 PM:         "nodes": [
4:15:24 PM:           {
4:15:24 PM:             "excerpt": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet turpis at nisi porta volutpat. Ut vel purus fringilla, fringilla…",
4:15:24 PM:             "frontmatter": {
4:15:24 PM:               "date": "May 06, 2015",
4:15:24 PM:               "title": "My Second Post!",
4:15:24 PM:               "imageAlt": "fun with mirrors",
4:15:24 PM:               "image": {
4:15:24 PM:                 "childImageSharp": {
4:15:24 PM:                   "gatsbyImageData": {
4:15:24 PM:                     "layout": "constrained",
4:15:24 PM:                     "backgroundColor": "#c8d8e8",
4:15:24 PM:                     "images": {
4:15:24 PM:                       "fallback": {
4:15:24 PM:                         "src": "/static/0cc19422a1ec95a44f99055cf43fd337/394a8/image2.jpg",
4:15:24 PM:                         "srcSet": "/static/0cc19422a1ec95a44f99055cf43fd337/9d796/image2.jpg 160w,\n/static/0cc19422a1ec95a44f99055cf43fd337/2c1fd/image2.jpg 320w,\n/static/0cc19422a1ec95a44f99055cf43fd337/394a8/image2.jpg 640w",
4:15:24 PM:                         "sizes": "(min-width: 640px) 640px, 100vw"
4:15:24 PM:                       },
4:15:24 PM:                       "sources": [
4:15:24 PM:                         {
4:15:24 PM:                           "srcSet": "/static/0cc19422a1ec95a44f99055cf43fd337/f7b29/image2.webp 160w,\n/static/0cc19422a1ec95a44f99055cf43fd337/09d71/image2.webp 320w,\n/static/0cc19422a1ec95a44f99055cf43fd337/359e0/image2.webp 640w",
4:15:24 PM:                           "type": "image/webp",
4:15:24 PM:                           "sizes": "(min-width: 640px) 640px, 100vw"
4:15:24 PM:                         }
4:15:24 PM:                       ]
4:15:24 PM:                     },
4:15:24 PM:                     "width": 640,
4:15:24 PM:                     "height": 400
4:15:24 PM:                   }
4:15:24 PM:                 }
4:15:24 PM:               }
4:15:24 PM:             },
4:15:24 PM:             "id": "75c3a337-b036-572b-a9f8-5671d717f6e9",
4:15:24 PM:             "slug": "my-second-post/"
4:15:24 PM:           },
4:15:24 PM:           {
4:15:24 PM:             "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet turpis at nisi porta volutpat. \nUt vel purus fringilla, fringilla…",
4:15:24 PM:             "frontmatter": {
4:15:24 PM:               "date": "May 01, 2015",
4:15:24 PM:               "title": "Hello World",
4:15:24 PM:               "imageAlt": "walkway fading into the mist",
4:15:24 PM:               "image": {
4:15:24 PM:                 "childImageSharp": {
4:15:24 PM:                   "gatsbyImageData": {
4:15:24 PM:                     "layout": "constrained",
4:15:24 PM:                     "backgroundColor": "#f8f8f8",
4:15:24 PM:                     "images": {
4:15:24 PM:                       "fallback": {
4:15:24 PM:                         "src": "/static/bc063de735a9ef76e601ec82ffa45064/e70fc/image1.jpg",
4:15:24 PM:                         "srcSet": "/static/bc063de735a9ef76e601ec82ffa45064/da65b/image1.jpg 160w,\n/static/bc063de735a9ef76e601ec82ffa45064/f6fcd/image1.jpg 320w,\n/static/bc063de735a9ef76e601ec82ffa45064/e70fc/image1.jpg 640w",
4:15:24 PM:                         "sizes": "(min-width: 640px) 640px, 100vw"
4:15:24 PM:                       },
4:15:24 PM:                       "sources": [
4:15:24 PM:                         {
4:15:24 PM:                           "srcSet": "/static/bc063de735a9ef76e601ec82ffa45064/405d4/image1.webp 160w,\n/static/bc063de735a9ef76e601ec82ffa45064/dde70/image1.webp 320w,\n/static/bc063de735a9ef76e601ec82ffa45064/62859/image1.webp 640w",
4:15:24 PM:                           "type": "image/webp",
4:15:24 PM:                           "sizes": "(min-width: 640px) 640px, 100vw"
4:15:24 PM:                         }
4:15:24 PM:                       ]
4:15:24 PM:                     },
4:15:24 PM:                     "width": 640,
4:15:24 PM:                     "height": 426.99999999999994
4:15:24 PM:                   }
4:15:24 PM:                 }
4:15:24 PM:               }
4:15:24 PM:             },
4:15:24 PM:             "id": "5aa2f786-5929-5398-a490-e672ee75a7c3",
4:15:24 PM:             "slug": "hello-world/"
4:15:24 PM:           }
4:15:24 PM:         ]
4:15:24 PM:       }
4:15:24 PM:     },
4:15:24 PM:     "pageContext": {
4:15:24 PM:       "pageNumber": 1,
4:15:24 PM:       "humanPageNumber": 2,
4:15:24 PM:       "skip": 3,
4:15:24 PM:       "limit": 3,
4:15:24 PM:       "numberOfPages": 2,
4:15:24 PM:       "previousPagePath": "/blog",
4:15:24 PM:       "nextPagePath": ""
4:15:24 PM:     }
4:15:24 PM:   },
4:15:24 PM:   "staticQueryHashes": []
4:15:24 PM: }
4:15:24 PM: failed Building static HTML for pages - 4.535s
4:15:24 PM: error Building static HTML failed for path "/blog/2"
4:15:25 PM: 
4:15:25 PM:    8 |
4:15:25 PM:    9 | const BlogPosts = ({ data, pageContext }) => {
4:15:25 PM: > 10 | const image = getImage(data.allMdx.frontmatter.image)
4:15:25 PM:      |                                                ^
4:15:25 PM:   11 |
4:15:25 PM:   12 |     return (
4:15:25 PM:   13 |         <div className="bg-gradient-to-r from-yellow-400 via-red-200 to-indigo-200">

WebpackError: TypeError: Cannot read properties of undefined (reading 'image')

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using gatsby-plugin-image causes error: can't access property "image" #34164

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Using gatsby-plugin-image causes error: can't access property "image" #34164

Isaac-Tait Dec 1, 2021

Replies: 3 comments

violy Dec 2, 2021

Isaac-Tait Dec 3, 2021 Author

Isaac-Tait Dec 3, 2021 Author

Isaac-Tait
Dec 1, 2021

violy
Dec 2, 2021

Isaac-Tait
Dec 3, 2021
Author

Isaac-Tait
Dec 3, 2021
Author