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?



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



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 }) {
  const frontmatter = data.markdownRemark.frontmatter
  const html = data.markdownRemark.html
  const tags = frontmatter.tags

  return (
        <div className="article">
          <div className="tags-container">
            <div className="tags">
              { => {
                return <span className="tag">{tag}</span>
          <hr />
            dangerouslySetInnerHTML={{ __html: html }}

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

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:

   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

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}.”