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

Question

我对 Gatsby 很陌生(昨天开始)并且遇到了问题。该应用程序在开发中完美运行，但在尝试构建时出现此错误:

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

您没有提供重要的一点:歼灭页面的前言。

错误非常明显:frontmatter 应该提供一个有效值。

类型错误:无法解构“未定义”或“null”的属性“frontmatter”。

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

两种可能的解决方案

• 检查 Markdown 文件中的 frontmatter。您需要始终 100% 确保 frontmatter 的格式符合预期。
• 向您的 entryTemplate 文件添加错误检查。与单元测试一样，您检查各个 frontmatter 条目的正确值。

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