title: gatsby.js: "node.frontmatter.image is null"
body: <p>LAST EDIT: fixed. It was a naming convention. I am currently using this tree structure:</p>
  <p>-pages
  --posts
  ---00X-post
  For pagination/programmatically works fine so far. And inside, md with its correspondent image (used as a thumbnail too). One of those had the naming wrong. Fixed. Now everything is working just fine.</p>
  <p>EDIT and UPDATE:</p>
  <p>Thank you for your quick answer. I tried that, nothing changed. I do believe it has to do with all the templates for pagination I am currently using. For example, the one in charge of creating page 2 and so in is this one:</p>
  <pre><code>import React from 'react';
  import Layout from '../components/layout';
  import Post from '../components/Post';
  import { graphql } from 'gatsby';
  import { Row, Col } from 'reactstrap'; 
  import Sidebar from '../components/Sidebar'; 
  import PaginationLinks from '../components/PaginationLinks'; 
  
  const postList = (props) =&gt; {
      const posts = props.data.allMarkdownRemark.edges
      const { currentPage, numberOfPages } = props.pageContext 
  
      return (
          &lt;Layout pageTitle&gt;
          &lt;h1 className='titles'&gt;{`page ${currentPage}`}&lt;/h1&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                  {posts.map(({node}) =&gt; (
                      &lt;Post
                          key={node.id}
                          slug={node.fields.slug}
                          title={node.frontmatter.title}
                          author={node.frontmatter.author}
                          date={node.frontmatter.date}
                          body={node.excerpt}
                          tags={node.frontmatter.tags}
                          fluid={node.frontmatter.image.childImageSharp.fluid}
                      /&gt;
                  ))}
                  &lt;PaginationLinks 
                  currentPage={currentPage} 
                  numberOfPages={numberOfPages} 
                      
                  /&gt;
                  &lt;/Col&gt;
                  &lt;Col md='4'&gt;
                      &lt;Sidebar&gt;
  
                      &lt;/Sidebar&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/Layout&gt;
      )
  
  }
  
  export const postListQuery = graphql`
      query postListQuery($skip: Int!, $limit: Int!) {
          allMarkdownRemark(
              sort: { fields: [frontmatter___date], order: DESC}
              limit: $limit
              skip: $skip 
          ) {
              edges {
                  node {
                      id 
                      frontmatter {
                          title
                          date
                          author
                          tags
                          image {
                              childImageSharp {
                                  fluid(maxWidth: 650, quality: 90) {
                                      ...GatsbyImageSharpFluid
                                  }
                              }
                          }
                      }
                      fields {
                          slug
                      }
                      excerpt
                  }
              }
          }
      }
  `
  
  export default postList
  </code></pre>
  <p>Same error messages appear when creating pages by tags/authors. If I delete the image field from the query, everything works. This is unusual.</p>
  <p>While doing a simple blog project with Gatsby I run into either &quot;TypeError: childImageSharp is undefined” or &quot;node.frontmatter.image is null&quot;. This error message appears at random. By the time I started writing this, trying to access pages/2 only triggered it.</p>
  <p>Here's index.js:</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql, StaticQuery } from 'gatsby'; 
  
  import Layout from &quot;../components/layout&quot;
  import SEO from &quot;../components/seo&quot;
  import Post from '../components/Post'; 
  import Sidebar from '../components/Sidebar'; 
  import { Row, Col } from 'reactstrap'; 
  import PaginationLinks from '../components/PaginationLinks'; 
  
  const IndexPage = () =&gt; {
  
    const postsPerPage = 5; 
    let numberOfPages 
  
    return (
      &lt;Layout&gt;
      &lt;SEO title=&quot;home&quot; keywords={[`procedural`, `gatsby`]}/&gt;
      &lt;h1 className='titles'&gt;procedural&lt;/h1&gt;
  
      &lt;Row&gt;
        &lt;Col&gt;
          &lt;StaticQuery 
          query={indexQuery}
          render={data =&gt; {
  
            numberOfPages = Math.ceil(
            data.allMarkdownRemark.totalCount / postsPerPage
            ); 
  
            return (
              &lt;div&gt;
                {
                  data.allMarkdownRemark.edges.map(({ node }) =&gt; (
                    &lt;Post 
                    key={node.id}
                    title={node.frontmatter.title}
                    author={node.frontmatter.author}
                    date={node.frontmatter.date}
                    slug={node.fields.slug}
                    body={node.excerpt}
                    fluid={node.frontmatter.image.childImageSharp.fluid}
                    tags={node.frontmatter.tags}
                    /&gt; 
                  ))
                }
                &lt;PaginationLinks currentPage={1} numberOfPages={numberOfPages} /&gt;
              &lt;/div&gt;
            )
          }}
          /&gt;
        &lt;/Col&gt;
        &lt;Col md='4'&gt;
          &lt;Sidebar&gt;
  
          &lt;/Sidebar&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
  
      &lt;/Layout&gt;
    )
  }
  
  const indexQuery = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC}
      limit: 5
      ) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date
            author
            tags
            image {
              childImageSharp {
                fluid(quality: 85, maxWidth: 960) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
  `
  
  export default IndexPage
  </code></pre>
  <p>Here's gatsby-node.js:</p>
  <pre><code>const path = require('path'); 
  const { slugify } = require('./src/utils/utilityFunctions');
  const authors = require('./src/utils/authors'); 
  const _ = require('lodash'); 
  
  // single post generator
  exports.onCreateNode = ({ node, actions }) =&gt; {
      const { createNodeField } = actions
      if(node.internal.type === 'MarkdownRemark') {
          const slugFromTitle = slugify(node.frontmatter.title)
          createNodeField({
              node, 
              name: 'slug',
              value: slugFromTitle,
          })
      }
  }
  
  exports.createPages = async ({ actions, graphql }) =&gt; {
      const { createPage } = actions; 
      
      
      const templates = {
          singlePost: path.resolve('./src/templates/single-post.js'),
          tagsPage: path.resolve('./src/templates/tags-page.js'),
          tagPosts: path.resolve('./src/templates/tag-post.js'),
          postList: path.resolve('./src/templates/post-list.js'),
          authorPosts: path.resolve('./src/templates/author-posts.js'), 
      } 
  
      const res = await graphql(`
          {
              allMarkdownRemark {
                  edges {
                      node {
                          frontmatter{
                              author
                              tags
                          }
                          fields {
                              slug
                          }
                      }
                  }
              }
          }
      `)
      
      if(res.errors) return Promise.reject(res.errors)
  
      const posts = res.data.allMarkdownRemark.edges
  
      posts.forEach(({node}) =&gt; {
          createPage({
              path: node.fields.slug,
              component: templates.singlePost,
              context: {
                  // passing slug, PENDING TAGS
                  slug: node.fields.slug,
                  // finding author imageUrl from authors.js and passing it to the single post template 
  
              },
          })
      })
  
  
              // creating post pages
  
      const postsPerPage = 5
      const numberOfPages = Math.ceil(posts.length / postsPerPage)
  
      Array.from({ length: numberOfPages }).forEach((_, index) =&gt; {
          const isFirstPage = index === 0
          const currentPage = index + 1
  
          // skip first page and go to index.js
          if (isFirstPage) return
  
          createPage({
              path: `/page/${currentPage}`,
              component: templates.postList,
              context: {
                  limit: postsPerPage,
                  skip: index * postsPerPage,
                  numberOfPages: numberOfPages,
                  currentPage: currentPage,
              },
              })
          })
  
          // tags PAGE GENERATOR; getting all tags
          let tags = []
          _.each(posts, edge =&gt; {
              if (_.get(edge, 'node.frontmatter.tags')) {
                tags = tags.concat(edge.node.frontmatter.tags)
              }
            })
  
          // account of tags, we're putting them like this: ['design', 'example', 'luck'] and also {design: X, example: Y, luck: z}
          let tagPostCounts = {}
          tags.forEach(tag =&gt; {
              tagPostCounts[tag] = (tagPostCounts[tag] || 0) + 1; 
          })
  
          tags = _.uniq(tags) //elimninate all duplicate entries 
  
          // create tags page here 
          createPage({
              path: `/tags`,
              component: templates.tagsPage,
              context: {
                  tags,
                  tagPostCounts,
              }
          })
  
          // tag post page creation here: 
          tags.forEach(tag =&gt; {
              createPage({
                  path: `/tag/${_.kebabCase(tag)}`,
                  component: templates.tagPosts,
                  context: {
                      tag
                  }
              })
          })
  
          // CREATING PAGES FOR EACH AUTHOR'S POSTS: 
          authors.forEach(author =&gt; {
              createPage({
                  path: `/author/${slugify(author.name)}`,
                  component: templates.authorPosts,
                  context: {
                      authorName: author.name,
                      imageUrl: author.imageUrl, 
                  }, 
              })
          })
  }
  </code></pre>
  <p>here's gatsby-config.js:</p>
  <pre><code>  plugins: [
      `gatsby-plugin-sharp`,
      `gatsby-transformer-sharp`,
      `gatsby-plugin-react-helmet`,
      `gatsby-plugin-sass`,
      `gatsby-transformer-remark`,
      `gatsby-plugin-catch-links`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images`,
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/pages`,
        },
      },
      {
        resolve: `gatsby-plugin-manifest`,
        options: {
          name: `procedural`,
          short_name: `procedural`,
          start_url: `/`,
          background_color: `#663399`, // PLACEHOLDER
          theme_color: `#663399`, // PLACEHOLDER
          display: `minimal-ui`, // PLACEHOLDER
          icon: `src/images/logo.png`, // This path is relative to the root of the site.
        },
      },
    ],
  </code></pre>
  <p>And here's my single-post.js:</p>
  <pre><code>import React from 'react';
  import Layout from '../components/layout'; 
  import { graphql, Link } from 'gatsby'; 
  import SEO from '../components/seo';
  import { Badge, Card, CardBody, CardSubtitle } from 'reactstrap'; 
  import Img from 'gatsby-image'; 
  import { slugify } from '../utils/utilityFunctions'; 
  
  const SinglePost = ({ data, pageContext }) =&gt; {
      const post = data.markdownRemark.frontmatter; 
  
      return (
          &lt;Layout&gt;
              &lt;SEO title={post.title}/&gt;
              &lt;h1 className='postTitles'&gt;{post.title}&lt;/h1&gt;
  
                      &lt;Card&gt;
                          &lt;Img className='card-image-top' fluid={post.image.childImageSharp.fluid}&gt;
  
                          &lt;/Img&gt;
                          &lt;CardBody className='cardBody'&gt;
                              &lt;CardSubtitle&gt;
                                  &lt;span className='text-info'&gt;
                                      {post.date}
                                  &lt;/span&gt; by{' '}
                                  &lt;span className='text-info'&gt;
                                      {post.author}
                                  &lt;/span&gt;
                              &lt;/CardSubtitle&gt;
                              &lt;div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}&gt;
  
                              &lt;/div&gt;
                              &lt;ul className='post-tags'&gt;
                                  {
                                      post.tags.map(tag =&gt; (
                                          &lt;li key={tag}&gt;
                                              &lt;Link to={`/tag/${slugify(tag)}`}&gt;
                                                  &lt;Badge className='myTags'&gt;{tag}&lt;/Badge&gt;
                                              &lt;/Link&gt;
                                          &lt;/li&gt;
                                      ))
                                  }
                              &lt;/ul&gt;
                              &lt;br/&gt;
                              &lt;Link
                                  to={'/'} 
                                  className='myButton float-left'&gt;
                                  Go back
                              &lt;/Link&gt;
                          &lt;/CardBody&gt;
  
                      &lt;/Card&gt;
                      &lt;h3 className='text-center'&gt;
                          Share this post
                      &lt;/h3&gt;
                      &lt;div className='text-center social-share-links'&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;a href={'https://www.facebook.com/sharer/sharer.php?u=' + baseUrl + 
                                  pageContext.slug}
                                  className='facebook' target='_blank'
                                  rel='noopener noreferrer'&gt;
                                      &lt;i className=&quot;fab fa-facebook-f fa-2x&quot;/&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href={'https://www.twitter.com/share?url=' + 
                                  baseUrl + 
                                  pageContext.slug +
                                  '&amp;text=' +
                                  post.title +
                                  '&amp;via' +
                                  'twitterHandle'}
                                  className='twitter' target='_blank'
                                  rel='noopener noreferrer'&gt;
                                      &lt;i className=&quot;fab fa-twitter fa-2x&quot;/&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href={'https://www.plus.google.com/share?url' + 
                                  baseUrl + 
                                  pageContext.slug
                                  }
                                  className='google' target='_blank'
                                  rel='noopener noreferrer'&gt;
                                      &lt;i className=&quot;fab fa-google fa-2x&quot;/&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href={'https://www.linkedin.com/shareArticle?url=' + 
                                  baseUrl + 
                                  pageContext.slug
                                  }
                                  className='linkedin' target='_blank'
                                  rel='noopener noreferrer'&gt;
                                      &lt;i className=&quot;fab fa-linkedin fa-2x&quot;/&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
  
          &lt;/Layout&gt;
      )
  
  }
  
  export const postQuery = graphql`
      query blogPostBySlug($slug: String!) {
          markdownRemark(fields: { slug: { eq: $slug } }) {
              id
              html
              frontmatter {
                  title
                  author
                  date
                  tags
                  image {
                      childImageSharp{
                          fluid(quality: 100, maxWidth: 960) {
                              ...GatsbyImageSharpFluid
                          }
                      }
                  }
  
              }
          }
  
      }
  `
  
  export default SinglePost; 
  </code></pre>
  <p>Here's what happens when using gatsby develop:</p>
  <pre><code>$ gatsby develop
  success open and validate gatsby-configs - 0.027s
  success load plugins - 0.904s
  success onPreInit - 0.031s
  success initialize cache - 0.005s
  success copy gatsby files - 0.081s
  success onPreBootstrap - 0.014s
  success createSchemaCustomization - 0.008s
  success Checking for changed pages - 0.002s
  success source and transform nodes - 0.126s
  success building schema - 0.291s
  info Total nodes: 110, SitePage nodes: 19 (use --verbose for breakdown)
  success createPages - 0.061s
  success Checking for changed pages - 0.001s
  success createPagesStatefully - 0.087s
  success update schema - 0.023s
  success write out redirect data - 0.002s
  success Build manifest and related icons - 0.103s
  success onPostBootstrap - 0.109s
  info bootstrap finished - 3.883s
  success onPreExtractQueries - 0.002s
  success extract queries from components - 0.419s
  success write out requires - 0.027s
  success run static queries - 0.030s - 2/2 65.79/s
  success run page queries - 0.020s - 2/2 100.53/s
  ⠀
  You can now view gatsby-starter-default in the browser.
  ⠀
    http://localhost:8000/
  ⠀
  View GraphiQL, an in-browser IDE, to explore your site's data and schema
  ⠀
    http://localhost:8000/___graphql
  ⠀
  Note that the development build is not optimized.
  To create a production build, use gatsby build
  ⠀
  success Building development bundle - 4.905s
  </code></pre>
  <p>Here's the error message when running gatsby build:</p>
  <pre><code>$ gatsby build
  success open and validate gatsby-configs - 0.024s
  success load plugins - 0.902s
  success onPreInit - 0.047s
  success delete html and css files from previous builds - 0.006s
  success initialize cache - 0.004s
  success copy gatsby files - 0.082s
  success onPreBootstrap - 0.012s
  success createSchemaCustomization - 0.008s
  success Checking for changed pages - 0.001s
  success source and transform nodes - 0.126s
  success building schema - 0.276s
  info Total nodes: 110, SitePage nodes: 19 (use --verbose for breakdown)
  success createPages - 0.056s
  success Checking for changed pages - 0.001s
  success createPagesStatefully - 0.094s
  success Cleaning up stale page-data - 0.006s
  success update schema - 0.035s
  success onPreExtractQueries - 0.003s
  success extract queries from components - 0.499s
  success write out redirect data - 0.002s
  success Build manifest and related icons - 0.102s
  success onPostBootstrap - 0.113s
  info bootstrap finished - 5.462s
  success run static queries - 0.021s - 2/2 96.19/s
  success run page queries - 0.013s - 1/1 79.77/s
  success write out requires - 0.005s
  success Building production JavaScript and CSS bundles - 10.390s
  success Rewriting compilation hashes - 0.003s
  failed Building static HTML for pages - 2.388s
  
   ERROR #95313 
  
  Building static HTML failed for path &quot;/page/2&quot;
  
  See our docs page for more info on this error: https://gatsby.dev/debug-html
  
  
    26 |                         body={node.excerpt}
    27 |                         tags={node.frontmatter.tags}
  &gt; 28 |                         fluid={node.frontmatter.image.childImageSharp.fluid}  
       |                                                       ^
    29 |                     /&gt;
    30 |                 ))}
    31 |                 &lt;PaginationLinks
  
  
    WebpackError: TypeError: Cannot read property 'childImageSharp' of null
  
    - post-list.js:28 
      src/templates/post-list.js:28:55
  
    - post-list.js:19 
      src/templates/post-list.js:19:24
  </code></pre>