Cannot read properties of null

[Isaac-Tait]

I am getting this error when I run gatsby build:

Building static HTML failed for path "/blog/hello-world/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

gatsby develop runs fine until I navigate to an individual blog post. Then I get this error:

Unhandled Run Time error: **Cannot read properties of null (reading 'frontmatter')**

The problem lies in my blog post template {mdx.slug}.js, which has the following code:

import React from 'react';
import { graphql, Link } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx'

import Header from '../../components/header'
import Bio from '../../components/bio'

const BlogPostPage = ({ data, pageContext, location }) => {
  const post = data.mdx
  const { previous, next } = pageContext

    return (
      <div location={location}>
          <Header /> 
          {/* 👇🏼 Blog post content*/}
          <div className="grid place-items-center bg-yellow-200 md:h-screen overflow-y-scroll">
                <p className="font-semibold text-3xl uppercase text-gray-700">{post.frontmatter.title}</p>
                <div className="mx-4 text-gray-800">
                    <MDXRenderer>       
                        {post.body}
                    </MDXRenderer>
                </div>
                <nav className="flex flex-wrap w-full justify-between px-4">
                <div>
                    {next && (
                        <Link to={next.fields.slug} rel="next">
                            <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">⬅️ Next Article</button>
                        </Link>
                    )}
                  </div>
                  <div>
                    {previous && (
                        <Link to={previous.fields.slug} rel="prev">
                            <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">Previous Article ➡️</button>
                        </Link>
                    )}
                  </div>
                </nav>              
              </div>
          
          <div className="grid place-items-center bg-yellow-200 md:h-screen overflow-y-scroll">
            <p className="font-semibold text-3xl uppercase text-gray-700">Title</p>
            <div className="mx-4 text-gray-800">
                <MDXRenderer>       
                    {post.body}
                </MDXRenderer>
            </div>
            <nav className="flex flex-wrap w-full justify-between px-4">
            <div>
                {next && (
                    <Link to={next.fields.slug} rel="next">
                        <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">⬅️ Next Article</button>
                    </Link>
                )}
              </div>
              <div>
                {previous && (
                    <Link to={previous.fields.slug} rel="prev">
                        <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">Previous Article ➡️</button>
                    </Link>
                )}
              </div>
            </nav>              
          </div>

          <div className="bg-gray-100 flex flex-wrap justify-center content-center">
            <p className="text-gray-600">Were you looking for something else? Head on over to our&nbsp;</p>
            <Link to={'/search'} className="underline text-red-400">
              search page
            </Link>
          </div>
          {/* 👆🏻 End of blog post content*/}
          <Bio />
        </div>
      )
}

export default BlogPostPage

export const query = graphql`
query ($slug: String!) {
  mdx(fields: { slug: { eq: $slug } }) {
    body
    frontmatter {
      title
      date
    }
  }
}
`

If I remove {post.frontmatter.title} then the errors move onto {post.body} and so on until only static content loads on the page... So, obviously my query is broken but when I test it at localhost://8000/__graphql the query runs fine. Any suggestions on how to fix this would be greatly appreciated. Cheers!

[Isaac-Tait]

Here is a link to my gatsby-node.js file if needed to debug.

[Isaac-Tait]

This only gets more and more confusing. I deleted post from {post.frontmatter.title} and then retyped it in and suddenly the blog post loads in development (localhost). There is no more error but now images are not loading. If I run gatsby build then I get the same error as before. So, gatsby develop and gatsby build are not in sync... Taking a look at these docs it would seem that #4 is the culprit:

Your app doesn’t correctly hydrate in the client, which results in gatsby develop and gatsby build being inconsistent. It’s possible that a change in a file like gatsby-ssr or gatsby-browser has a structure that is not reflected in the other file, meaning that there is a mismatch between client and server output.

I do not have a gatsby-ssr file and my gatsby-browser file has the following:

// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"

import './src/styles/global.css'

// Highlighting for code blocks
import "prismjs/themes/prism.css"

[Isaac-Tait]

Referencing this issue #4103

[violy]

First, I'll suggest you to prevent the error by testing value of post who look null and trace debug datas.

Here as exemple :

const BlogPostPage = ({ data, pageContext, location }) => {
  const post = data.mdx
  const { previous, next } = pageContext
  if(!post) return <pre>{JSON.stringify(pageContext,null,2)}</pre>

    return // ... your code
}

This code will print the pageContext when post is null

[Isaac-Tait]

@violy - that is a very handy trick. Thank you 👍🏼 😄

I added the code and after running gatsby develop and then navigating to the blog post my browser read:

{
  "id": "4652c2bb-7c87-5b8a-bea5-9db9924a9ab0",
  "slug": "published-through-netlify-cms/",
  "__params": {
    "slug": "published-through-netlify-cms"
  }
}

My first thought was that my query in gatsby-node.js was not providing the necessary information because the above should have had frontmatter title and body in it but only contained slug and id. So, I updated gatsby-node.js to:

      return graphql(`
      query loadSlugQuery {
        allMdx(sort: {fields: [frontmatter___date], order: DESC}) {
          edges {
            node {
              body
              id
              frontmatter { //added this line
                title
              }
              fields {
                slug
              }
            }
          }
        }
      }`, { limit: 1000}).then(result => {
        
          const posts = result.data.allMdx.edges
          posts.forEach((post, index) => {
              // create prev and next on each posts render (for Blog Post Pagination, BPP)
              const previous = index === (posts.length - 1) ? null : posts[index + 1].node
              const next = index === 0 ? null : posts[index - 1].node
  
              // previous and next are objects props sent as pageContext object to blogPostTemplate
              createPage({
                  path: post.node.fields.slug,
                  component: blogTemplate,
                  context: {
                      slug: post.node.fields.slug,
                      title: post.node.frontmatter.title, //added this line
                      body: post.node.body, //added this line 
                      previous,
                      next,
                  },
              })
          })

However, I am still getting the same read out when I navigate to the blog post...

What am I missing?

[violy]

Is your published-through-netlify-cms post OK ? have you try to gatsby clean and rebuild ?

Querying your data via pageContext don't change anything if the data is in failure (missing, whatever…) — you should continue to use page query instead of pageContext querying.

[Isaac-Tait]

My published-through-netlify-cms blog post appears fine to me:

---
title: Published through Netlify CMS
path: /netlify-cms
date: 2021-11-15T21:12:23.378Z
image: ./image4.jpg
imageAlt: something cool
---
<Latin Text filler for five paragraphs>

I have tried gatsby clean and rebuild at least a dozen times...

Odly enough the error messages changed this afternoon at random. Now it says:

Loading hot update chunk node_modules_gatsby-plugin-image_dist_lazy-hydrate-20d22952_js failed. (error: http://localhost:8001/node_modules_gatsby-plugin-image_dist_lazy-hydrate-20d22952_js.e1fd6b981777330d443a.hot-update.js)

and

null is not an object (evaluating 'post.frontmatter')

I am not understanding what you mean when you say

[I] should continue to use page query instead of pageContext querying.

Could you clarify please? Thank you for your help in debugging this, I very much appreciate it.

[violy]

what append if you put the same query (filtred on your post slug) on graphQLi interface ?

[Isaac-Tait]

If I run the query in GraphiQL

query ($slug: String) {
  mdx(fields: { slug: { eq: $slug } }) {
    body
    frontmatter {
      title
      date
    }
  }
}

I get this:

{
  "data": {
    "mdx": {
      "body": "var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Published through Netlify CMS\",\n  \"path\": \"/netlify-cms\",\n  \"date\": \"2021-11-15T21:12:23.378Z\",\n  \"image\": \"./image4.jpg\",\n  \"imageAlt\": \"something cool\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"So cool\\u2026 So very cool.\"), \" Testing testing 123\"), mdx(\"p\", null, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero enim, euismod non nunc id, lobortis vulputate erat. Sed pulvinar arcu a ligula sodales, et posuere lorem sollicitudin. Aenean vehicula est a est sagittis, nec tempus quam mattis. Vestibulum convallis nunc vitae ipsum suscipit commodo et ut justo. Nulla fringilla imperdiet fermentum. Maecenas et urna sapien. Donec pretium, nulla quis commodo consectetur, dui ex consectetur erat, convallis dictum velit mauris quis mi. Integer euismod mollis magna. Phasellus suscipit quam sed accumsan gravida. Aenean lorem risus, gravida ac neque id, ultrices malesuada lorem. Vivamus luctus dolor vitae volutpat rutrum. Donec at mollis metus. Quisque vulputate pretium nisi eget lacinia. Ut sit amet quam id tellus varius tristique.\"), mdx(\"p\", null, \"Nullam non rhoncus leo, ac commodo ex. Nam a sem mollis, laoreet odio vel, luctus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat posuere mauris, id ultrices turpis venenatis vitae. Pellentesque in tempor erat, in malesuada nibh. Etiam venenatis, tortor in iaculis sagittis, ex ante malesuada turpis, ut pharetra sapien nisl vel enim. Donec vitae est et urna finibus feugiat quis a ante. Aenean aliquet fringilla eros at finibus. Proin tristique dui elit, sit amet hendrerit diam eleifend a. Pellentesque eleifend ultricies libero nec tristique. Fusce quis nisi sapien.\"), mdx(\"p\", null, \"Aenean auctor ut nulla sed asdlfkjasdflkj. Duis non pellentesque velit, a consequat libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla non turpis at lectus luctus elementum id non tortor. Fusce pharetra ipsum at mattis vulputate. In vel nisl sed turpis sagittis fringilla at imperdiet nisi. Curabitur ex nisl, pharetra ac tristique ut, dictum ac massa. Mauris luctus gravida nunc at viverra. Donec ut lectus dictum, efficitur magna at, fringilla tellus. Etiam ut velit dictum, laoreet ex nec, tempus eros.\"));\n}\n;\nMDXContent.isMDXComponent = true;",
      "frontmatter": {
        "title": "Published through Netlify CMS",
        "date": "2021-11-15T21:12:23.378Z"
      }
    }
  },
  "extensions": {}
}

[Isaac-Tait]

I read this, so I gave it a shot:

const BlogPostPage = ({ data, pageContext, location }) => {
  const post = data.mdx
  const { previous, next } = pageContext
  //if(!post) return <pre>{JSON.stringify(pageContext,null,2)}</pre>
  const title = post.frontmatter.title ? post.frontmatter.title : ""; //<--- added this line
  const body = post.body ? post.body : ""; //<--- added this line

    return (
      <div location={location}>
          <Header /> 
          {/* 👇🏼 Blog post content*/}
          <div className="grid place-items-center bg-yellow-200 md:h-screen overflow-y-scroll">
            <p className="font-semibold text-3xl uppercase text-gray-700">{title}</p>
            <div className="mx-4 text-gray-800">
                <MDXRenderer>       
                    {body}
                </MDXRenderer>
            </div>
    
         <Rest of my code not relevant to this discussion>

export const query = graphql`
query ($slug: String) {
  mdx(fields: { slug: { eq: $slug } }) {
    frontmatter {
      title
    }
    body
    id
  }
}
`

export default BlogPostPage

That did not work either...

[Isaac-Tait]

Submitted bug report #34342

[AnilSeervi]

Use the id instead to query the blog post like such in {mdx.slug}.js

query ($id: String) {
  mdx(id: {eq: $id}) {
    frontmatter {
      title
    }
    body
  }
}

[Isaac-Tait]

@AnilSeervi I implemented your solution and the blog post loads now (no more null errors) but the previous and next blog post links are not rendering...

I updated the query to this:

query ($id: String) {
  mdx(id: {eq: $id}) {
    frontmatter {
      title
    }
    body
    id
    slug
  }
}

[AnilSeervi]

pageContext doesn't have previous and next properties. That is why I guess they are not being rendered.

[Isaac-Tait]

Oh interesting. I have found a few examples of Gatsby blogs getting the previous and next properties from pageContext though... Is that deprecated now? If I do not get that from pageContext where do I get it from? I already tried data

[Isaac-Tait]

I found this example starter (official Gatsby) and it has previous and next in the query (along with previous and next from data). I do not see an option for that in my GraphiQL... Mine is a mdx setup though and not a Markdown so maybe that is why?

[AnilSeervi]

Opened Isaac-Tait/null-gatsby-repo#1 as a fix for your problem.

[Isaac-Tait]

Thank you very much @AnilSeervi I was pleasantly surprised to see your pull request with the work you had put into it. I appreciate it greatly 👍🏼 🥇

To summarize: switching to async await was a big step in the gatsby-node.js file as well as cleaning up the createPage function. Also, the updated query in the blogPost template with previous and next in the query brought it all together.

Also I was having issues with pagination not working right until I moved my blog post template out of src -> pages -> updates -> {mdx.slug}.js and into the templates folder... Could the faulty pagination be because it was nested too far down?

[Isaac-Tait]

One more question, just because I am curious and I want to learn...

When I check my GraphiQL I do not see any options for previous or next. How does the query work if it is not an option in the Explorer?

I am referring to the query found here (blogPost template)

[AnilSeervi]

Thank you very much @AnilSeervi I was pleasantly surprised to see your pull request with the work you had put into it. I appreciate it greatly 👍🏼 🥇

To summarize: switching to async await was a big step in the gatsby-node.js file as well as cleaning up the createPage function. Also, the updated query in the blogPost template with previous and next in the query brought it all together.

Also I was having issues with pagination not working right until I moved my blog post template out of src -> pages -> updates -> {mdx.slug}.js and into the templates folder... Could the faulty pagination be because it was nested too far down?

No it was not because of nesting, but because of the ways you were creating the pages.
You were using both the pages directory and also createPage(in gatsby-node.js) to create the pages.

That is why when I first gave you a fix in #34274 (comment) ; did fix your null error but couldn't fix your (next & previous) pages navigation because they were referring to previous and next nodes on pageContext(context created in gatsby-node.js).

What was actually happening is that "pages created by pages directory" overuled the "pages created by createPage API". This way the pageContext created in gatsby-node.js was overriden and there was only id and slug of the current-page in the pageContext leading to null values for previous and next.

Note: previous and next are id's of previous and next blog nodes(if avaialble || null). These are available in the component(defined in gatsby-node.js) on pageContext prop and are also available as query-variables to use in queries. That is what I've done in the query at Blogpost.js template. I'm fetching the slug for previous or next blog node using respective id's.