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

【问题标题】：error building static HTML pages in Gatsby在 Gatsby 中构建静态 HTML 页面时出错
【发布时间】：2019-07-12 17:27:44
【问题描述】：

尽管 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 更改我的降价文件中的路径，但无济于事。

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

我认为这就是这里需要的所有相关代码，如果需要其他任何内容，请告诉我。

【问题讨论】：

在 graphiQL 中是否有相同的查询？
将编辑我的原始帖子以使其更容易使用屏幕截图，但简而言之，我收到"message": "Variable \"$path\" of required type \"String!\" was not provided.",，但如果我将 $path 的变量设置为您的一个博客的路径，查询返回正确的响应。

标签： reactjs jsx gatsby netlify-cms

【解决方案1】：

查看错误的第一行：

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

我敢打赌，您的.md 之一的路径是空的。也许您可以尝试过滤以找到具有空frontmatter路径或null的markdown节点？

如果该路径直接来自 netlifyCMS 并且您使用 string 小部件，IIRC 您可以传入 default 选项，以便回退到该路径

【讨论】：

嘿，谢谢你，你是对的，有一条空路。谢谢