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
- Run build twice to work around sporadic race condition: https://github.com/gatsbyjs/gatsby/issues/4103 — committed to CivicActions/civicactions.com by grugnog 6 years ago
- Run build twice to work around sporadic race condition: https://github.com/gatsbyjs/gatsby/issues/4103 — committed to acabouet/civicactions.com by grugnog 6 years ago
- add gatsby-node.js and prefix blog path with leading slash this is a possible fix for the bug described in this issue: https://github.com/gatsbyjs/gatsby/issues/4103 — committed to agohorel/portfolio-v2 by agohorel 4 years ago
- Add '/' to path in *.md since avoding runtime error - https://github.com/gatsbyjs/gatsby/issues/4103 — committed to getredash/website by masayuki038 8 months ago
- Fix 'Cannot read properties of null (reading 'frontmatter')' error Related: https://github.com/gatsbyjs/gatsby/issues/4103 — committed to lucydodo/website by lucydodo 3 months ago
I just resolved this same issue by adding a leading
/in thepathof 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 buildsFor 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:
For now, I’ve solved it like this too. thanks @tomwilliamfranklin
Ah, just to follow up:
Looks like that
gatsby-plugin-remove-trailing-slasheswas, 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/