Я очень новичок в Гэтсби (начал с него вчера) и столкнулся с проблемой. Приложение отлично работает в разработке, но при попытке сборки я получаю эту ошибку:
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
}
}
}
`
Я в недоумении, поскольку он работает в режиме разработки, но я ожидаю, что ошибка будет ясно для более опытных.
Я ценю любую помощь, которую могу получить.
РЕДАКТИРОВАТЬ:
Это действительно происходит в режиме разработки, когда я go на любой из маршрутов.