Question

我对盖茨比很陌生（昨天开始），遇到了问题。该应用程序在开发中可以完美运行，但是在尝试构建时出现此错误：

failed Building static HTML for pages - 1.092s

 ERROR #95313

Building static HTML failed for path "/annihilation"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  15 | }) {
  16 |  const { markdownRemark } = data // data.markdownRemark holds your post data
> 17 |  const { frontmatter, html } = markdownRemark
     |          ^
  18 |
  19 |  return (
  20 |      <Layout>


  WebpackError: TypeError: Cannot destructure property `frontmatter` of 'undefined' or 'null'.

  - index.js:17 Template
    src/templates/entryTemplate/index.js:17:10


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Command failed: /usr/local/Cellar/yvm/3.4.0/versions/v1.21.1/bin/yarn.js build

这是我的配置文件：

module.exports = {
    siteMetadata: {
        title: `Best Horror Scenes — An ever growing collection featuring some of the best scenes in horror.`,
        description: `“Best Horror Scenes” is a collection of scenes I feel are some of the most affecting in horror. Some may be simple black cat scares, others may be more subdued or nuanced. Many come from films that aren’t necessarily “horror” but have elements or threads of horror, and all have the same general effect: unease, dread, fear, shock, disgust.`,
        ogImage: 'https://besthorrorscenes.com/images/social.png',
    },
    plugins: [
        'gatsby-plugin-react-helmet',
        'gatsby-plugin-postcss',
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        'gatsby-transformer-remark',
        'gatsby-plugin-feed',
        {
            resolve: 'gatsby-plugin-google-analytics',
            options: {
                trackingId: 'UA-XXXXXXXX-XX',
            },
        },
        {
            resolve: 'gatsby-plugin-react-svg',
            options: {
                rule: {
                    include: /assets/,
                },
            },
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'entries',
                path: `${__dirname}/src/entries`,
            },
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'images',
                path: `${__dirname}/src/images`,
            },
        },
        {
            resolve: 'gatsby-plugin-manifest',
            options: {
                name: 'best-horror-scenes',
                short_name: 'best-horror-scenes',
                start_url: '/',
                background_color: '#d94439',
                theme_color: '#d94439',
                display: 'minimal-ui',
                icon: 'src/images/icon.png',
            },
        },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        `gatsby-plugin-offline`,
    ],
}

…和我的节点文件：

const path = require(`path`)
exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions
    const entryTemplate = path.resolve(`src/templates/entryTemplate/index.js`)
    const result = await graphql(`
        {
            allMarkdownRemark(
                sort: { order: DESC, fields: [frontmatter___index] }
                limit: 1000
            ) {
                edges {
                    node {
                        frontmatter {
                            path
                        }
                    }
                }
            }
        }
    `)

    // Handle errors
    if (result.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`)
        return
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: node.frontmatter.path,
            component: entryTemplate,
            context: {}, // additional data can be passed via context
        })
    })
}

投诉涉及我的entryTemplate文件，看起来像这样：

import React from "react"
import { graphql, Link } from "gatsby"

import Article from '../../components/Article'
import Layout from '../../components/Layout'
import SEO from '../../components/seo'

import BackArrow from '../../assets/arrow.svg'

// Styles
import style from './index.module.css'

export default function Template({
    data,
}) {
    const { markdownRemark } = data
    const { frontmatter, html } = markdownRemark

    return (
        <Layout>
            <SEO
                image={ `https://besthorrorscenes.com/posters/${frontmatter.poster}` }
                title={ frontmatter.title }
                url={ `https://besthorrorscenes.com${frontmatter.path}` }
            />
            <nav className={ style.ArticleNav }>
                <Link className={ style.BackLink } to="/">
                    <BackArrow className={ style.BackArrow } />
                    Back to list
                </Link>
            </nav>
            <Article
                standalone
                director={ frontmatter.director }
                entryNumber={ frontmatter.index }
                isPlaying={ false }
                key={ frontmatter.index }
                poster={ frontmatter.poster }
                setIsPlaying={ () => {} }
                slug={ frontmatter.path }
                title={ frontmatter.title }
                url={ frontmatter.url }
                year={ frontmatter.year }
            />
            <section className={ style.DidYouKnow }>
                <h2>Did<br />You<br />Know?</h2>
                <div className={ style.DidYouKnowContent } dangerouslySetInnerHTML={ { __html: html } } />
            </section>
        </Layout>
    )
}

export const query = graphql`
    query($path: String!) {
        markdownRemark(frontmatter: { path: { eq: $path } }) {
            html
            frontmatter {
                director
                index
                path
                poster
                title
                url
                year
            }
        }
    }
`

我在这里很茫然，因为它可以在开发模式下工作，但我希望错误对于经验丰富的人来说是显而易见的。

感谢您能提供的任何帮助。

编辑：

这实际上在我进入任何一条路线时都在开发模式下发生。

Answer 1

您没有提供重要的信息：annihilation page的重要事项。

错误非常清楚：frontmatter应该提供一个有效值。

TypeError: Cannot destructure property `frontmatter` of 'undefined' or 'null'.

此错误表示Gatsby或Webpack在那里期望有一个有效值，但发现一个无效的值破坏了构建。

两种可能的解决方案

检查降价文件中的前题。您需要始终确保100％的内容符合预期格式。
将错误检查添加到您的entryTemplate文件中。像单元测试一样，您可以检查各个前题条目以获取正确的值。

只能在不知道您的项目代码的情况下推测为什么仅在gatsby build而不在gatsby develop中发生的原因。阅读build docs，了解Gatsby构建过程的工作原理。

Answer 2

事实证明，问题在于我存储的是/24_file-name/index.md之类的MD文件，而不是/24_file-name.md。更新该结构可以解决该问题。

为什么在这种情况下markdownRemark未定义？

2 个答案: