LaVOZs

The World’s Largest Online Community for Developers

'; javascript - GatsbyJS occures `Cannot read property 'frontmatter' of null` when I tried to build - LavOzs.Com

I'm trying to build my new GatsbyJS application.

This application works well when I try in gatsby develop.

But when I tried to build, Builder can't find frontmatter variant.

It seems to be like GraphQL has no problem because I can check markdown's content in log.

What is wrong in my code?

gatsby-config.js

...

plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/articles`,
        name: "articles",
      },
    },

...

src/pages/markdown-template.js

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

import Layout from "../components/layout"
import CustomCard from "../components/ui/customcard"
import "./markdown-template.css"

export default function Template({ data }) {
  console.log(data.markdownRemark)
  const frontmatter = data.markdownRemark.frontmatter
  const html = data.markdownRemark.html
  const tags = frontmatter.tags

  return (
    <Layout>
      <CustomCard>
        <div className="article">
          <h1>{frontmatter.title}</h1>
          <h2>{frontmatter.updated}</h2>
          <div className="tags-container">
            <div className="tags">
              {tags.map(tag => {
                return <span className="tag">{tag}</span>
              })}
            </div>
          </div>
          <hr />
          <div
            className="article-body"
            dangerouslySetInnerHTML={{ __html: html }}
          />
        </div>
      </CustomCard>
    </Layout>
  )
}

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        created(formatString: "YYYY-MM-DD")
        updated(formatString: "YYYY-MM-DD")
        path
        title
        tags
        category
        language
      }
    }
  }
`

Console output when I tried to run gatsby build

...

success Building production JavaScript and CSS bundles - 9.682s
success Rewriting compilation hashes - 0.005s
success run queries - 9.978s - 10/10 1.00/s
[                            ]   0.001 s 0/7 0% Building static HTML for pages
{
  html: '<p>asdf</p>\n<h1>test</h1>',
  frontmatter: {
    created: '2020-01-10',
    updated: '2010-01-10',
    path: '/article/hello',
    title: 'Hello Gatsby',
    tags: [ 'Hello', 'World' ],
    category: 'test',
    language: 'ko'
  }
}
failed Building static HTML for pages - 1.742s

 ERROR #95313 

Building static HTML failed for path "/markdown-template/"

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


   8 | export default function Template({ data }) {
   9 |   console.log(data.markdownRemark)
> 10 |   const frontmatter = data.markdownRemark.frontmatter
     |                                           ^
  11 |   const html = data.markdownRemark.html
  12 |   const tags = frontmatter.tags
  13 | 


  WebpackError: TypeError: Cannot read property 'frontmatter' of null

  - markdown-template.js:10 Template
    src/pages/markdown-template.js:10:43

...
Related
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
React - uncaught TypeError: Cannot read property 'setState' of undefined
Creating a react component for gatsby-image (and passing in props of filenames and sizes)
Gatsby: set an image background through frontmatter, GraphQl and Styled-components
Pass string to a GraphQL StaticQuery in Gatsby
Adjacent JSX elements must be wrapped in an enclosing tag - gatsby.js
Use absolute path for featured image in markdown post with Gatsby
Gatsby + Markdown: How to simply get data from a specific markdown in a single page?
Adding Bootstrap to Gatsby produces “Uncaught TypeError: Cannot read property 'fn' of undefined”
CraftCMS Gatsby project throwing error “GraphQL Error Expected type [String], found {eq: $slug}.”