error building static HTML pages in Gatsby

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