gatsby: TypeError: Cannot read property 'frontmatter' of null

Description

Environment

Gatsby version: 1.9.158 Node.js version: 8.9.3 Operating System: MacOS X

File contents (if changed):

gatsby-config.js: resolve: gatsby-transformer-remark,

package.json:

“dependencies”: { “gatsby”: “^1.9.158”, “gatsby-link”: “^1.6.34”, “gatsby-plugin-canonical-urls”: “^1.0.12”, “gatsby-plugin-react-helmet”: “^2.0.3”, “gatsby-plugin-sharp”: “^1.6.27”, “gatsby-remark-images”: “^1.5.43”, “gatsby-remark-prismjs”: “^1.2.15”, “gatsby-source-filesystem”: “^1.5.16”, “gatsby-transformer-remark”: “^1.7.30”, … }

gatsby-node.js: gatsby-browser.js: gatsby-ssr.js:

Actual result

I write my pages in Markdown. When I forgot the leading slash in the frontmatter’s path property, like so:

path: about-me

then I see an error in the browser in yarn develop:

TypeError: Cannot read property 'frontmatter' of null

This error message is not helpful at all. It cost me lots of time.

Expected behavior

Gatsby should show a useful error message like

path property in frontmatter of file XYZ must have a leading slash

Steps to reproduce

1.

2.

3.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 33
  • Comments: 27 (3 by maintainers)

Commits related to this issue

Most upvoted comments

I just resolved this same issue by adding a leading / in the path of my latest post, after much struggle trying to decipher its meaning and finally landing on this thread! Just thought I’d throw my +1 in for this being a rather unhelpful error 😃

In case it’s helpful, on my local everything worked fine except for the URL with the improper path value (throwing no errors except in-browser when I visited the specific address), but it was blocking Netlify’s site compile completely.

I hit this issue today. I changed from "gatsby": "^2.1.4" to "gatsby": "^1.x", and I don’t have it anymore. Reading the comments here I can’t understand why this works.

I observed it was happening when I was renaming content/project/folders (I’m reusing portfolio-emma starter). post.frontmatter & post was null for the project with modified folder name in .cache/app.js. Deleting .cache and running dev script fixes it but it is a bit annoying.
I’ve added the .cache deletion to my dev script for the moment, is there a better solution?

I was facing the same issue, so what i did, i created another post with same content as previous post(post which was showing cannot read property of null) but with different path and rerun the code, then the new post which i created was working fine and the previous post which was showing the error was still showing the error so i deleted it. now everything is working fine. This worked out for me 😃

I get this all the time working on React blog. It’s pretty frustrating. To reproduce, clone reactjs.org, open a blog post and start editing it. Eventually you’ll hit this.

v2 is better at this but still not perfect. The problem is basically a timing issue where queries can sometimes be run when data is in process of updating. The plan is to add xstate to ensure that data is finished processing before we run queries on the updated data.

Bit of an avoiding the problem solution, but to fix this I contained the entire function and return statement in an if statement like: if(frontmatter !== null) { }

and then put an else statement else return null, it seemed like it was trying to produce a blog post from a null markdown after producing the actual blog posts. Probably my dodgy code - but it builds

For me, the issue was in docs.js adding a null check solved it. I do not see this error anymore. Here are the changes that I have applies there:


    // meta tags
-  const metaTitle = mdx.frontmatter.metaTitle;
+ const metaTitle = mdx.frontmatter? mdx.frontmatter.metaTitle : "";

-  const metaDescription = mdx.frontmatter.metaDescription;
+ const metaDescription = mdx.frontmatter? mdx.frontmatter.metaDescription: "";

Bit of an avoiding the problem solution, but to fix this I contained the entire function and return statement in an if statement like: if(frontmatter !== null) { }

and then put an else statement else return null, it seemed like it was trying to produce a blog post from a null markdown after producing the actual blog posts. Probably my dodgy code - but it builds

For now, I’ve solved it like this too. thanks @tomwilliamfranklin

Ah, just to follow up:

Looks like that gatsby-plugin-remove-trailing-slashes was, in fact, causing some issues for me. I removed that and changed the format to something like this in my frontmatter and it seemed to work. Needed both the leading and trailing slash.

path: /projects/lego/