error building static HTML pages in Gatsby - reactjs

Question

Getting an error when building site even though Gatsby develop works fine, the markdown is coming from Netlify CMS. The specific error is:
error Building static HTML failed for path "/null"
See our docs page on debugging HTML builds for help https://gatsby.app/debug-html
11 | export default function Template({ data }) {
12 | const { markdownRemark } = data;
> 13 | const { frontmatter, html } = markdownRemark;
| ^
14 | return (
15 | <Layout>
16 | <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
WebpackError: TypeError: Cannot read property 'frontmatter' of null
- blogTemplate.js:13 Template
lib/src/templates/blogTemplate.js:13:11
I have been reading the other similar paths and have tried changing the path in my markdown files from the cms but it was to no avail.
gatsby-config.js
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/blog`,
name: "markdown-pages"
}
},
blogTemplate.js
export default function Template({ data }) {
const { markdownRemark } = data;
const { frontmatter, html } = markdownRemark;
return (
<Layout>
<SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
<div className="blog-posts">
<h1 className="blog-title">{frontmatter.title}</h1>
<h2 className="blog-date">{frontmatter.date}</h2>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
<Link to="/blog/" className="backBTN">
Go Back
</Link>
</div>
<Footer />
</Layout>
);
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`;
gatsby-node.js
const path = require("path");
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`);
return graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: `${node.frontmatter.path}`,
component: blogPostTemplate,
context: {}
});
});
});
};
GraphQL
the query returns the following error unless I pass in a specific path of one of the blog posts then it returns the correct results
{
"errors": [
{
"message": "Variable \"$path\" of required type \"String!\" was not provided.",
"locations": [
{
"line": 1,
"column": 7
}
]
}
]
}
graphql screenshot with variable passed in
I think that is all the relevant code that is needed here, just let me know if anything else is needed.

Answer 1

Check out this very first line of the error:
error Building static HTML failed for path "/null"
I bet one of your .md has an empty path. Maybe you can try filtering to find a markdown node with empty frontmatter path, or null?
If that path was coming directly from netlifyCMS & you use the string widget, IIRC you can pass in a default options so it'll fallback to that