Question

即使Gatsby开发工作正常，在构建站点时也会出错，降价幅度来自Netlify CMS。具体错误是：

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

我一直在阅读其他类似的路径，并尝试从cms更改markdown文件中的路径，但无济于事。

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

该查询返回以下错误，除非我传递其中一篇博客文章的特定路径，然后它返回正确的结果

{
  "errors": [
    {
      "message": "Variable \"$path\" of required type \"String!\" was not provided.",
      "locations": [
        {
          "line": 1,
          "column": 7
        }
      ]
    }
  ]
}

graphql screenshot with variable passed in

我认为这是这里需要的所有相关代码，请告诉我是否还有其他需要。

Answer 1

检查错误的第一行：

错误为路径“ / null”构建静态HTML失败

我敢打赌，您的.md中有一个空路。也许您可以尝试过滤以找到具有空前部路径或为空的markdown节点？

如果该路径直接来自netlifyCMS，并且您使用的是string小部件，则IIRC可以传入default选项，这样它就可以退回到该路径了。

在Gatsby中构建静态HTML页面时出错

gatsby-config.js

blogTemplate.js

gatsby-node.js

GraphQL

1 个答案: