0

即使 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 文件中的路径，但无济于事。

盖茨比-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
      }
    }
  }
`;

盖茨比-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屏幕截图

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

4

1 回答 1

0

查看错误的第一行：

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

我敢打赌你的一个人.md有一条空路。也许您可以尝试过滤以找到带有空frontmatter路径或null的markdown节点？

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

于 2019-02-19T15:01:13.647 回答