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

Description

WebpackError: TypeError: Cannot read property 'frontmatter' of null when build in prod npm run build

Steps to reproduce

npm run build with following code

case.js (page template)

import React from "react"
import { graphql} from 'gatsby'
import {GatsbyImage, getImage} from 'gatsby-plugin-image'
import Slider from 'react-slick'
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"

import Layout from "../layouts/layout"
import Seo from "../components/seo"

import './case.scss'

export default ({ data }) => {

const {nodes} = data.allFile

const settings = {
  dots: true,
  fade: true,
  arrows: false,
  infinite: true,
  autoplay: true,
  speed: 1000,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1
};

let rightColumn = ``;

if (data.markdownRemark.frontmatter !== null) { 
  const {frontmatter, html} = data.markdownRemark

  rightColumn = `
  <div class="view-case__info-title">
    <h1 class="text-secondary mb-24">${ frontmatter.title }</h1>
  </div>
  <div class="view-case__info-description mb-24">
    <div class="view-text">
      ${html}
    </div>
  </div>
  <div class="view-case__info-skills mb-24">
    <span class="view-case__label">Skills:</span>
    ${
      frontmatter.stack.map((tech) => {
        return '<div class="tag tag--technology tag--'+tech+' mb-8"></div>'
      }).join('')
    }
  </div>
  <div class="view-case__info-meta">
      <div class="view-case__info-date mb-12">
        <span class="view-case__label mb-16">Date:</span> ${frontmatter.date}
      </div>
      <div class="view-case__info-client mb-12">
        <span class="view-case__label mb-16">Client:</span>
        ${frontmatter.client}
      </div>
      <div class="view-case__info-link">
        <span class="view-case__label mb-16">Project link:</span>
        <a href="${ frontmatter.url }">${ frontmatter.url.replace(/(^\w+:|^)\/\//, '') }</a>
      </div>
  </div>`
}

  return (
    <Layout>
      <Seo title="Project" />
      <div className="view view-case">
        <section className="view-case__info">
          <div className="view-case__info-left">
            <Slider {...settings}>
              {
                nodes.map((node) => {
                  const {childImageSharp, id, name} = node
                  const image = getImage(childImageSharp)
                  return (
                    <div className="slick-image-container" key={id}>
                      <GatsbyImage image={image} alt={name}/>
                    </div>
                  )
                })
              }
            </Slider>
          </div>
          {
            <div className="view-case__info-right" dangerouslySetInnerHTML={{ __html: rightColumn }}></div>
          }
        </section>
      </div>
    </Layout>
  )
}

export const query = graphql `query Case ($slug:String, $screenshots:String) {
  markdownRemark(frontmatter: {slug: {eq: $slug}}) {
    html
    frontmatter {
      stack
      title
      slug
      date
      client
      url
    }
  }
  allFile(
    filter: {absolutePath: {regex: $screenshots}}
  ) {
    nodes {
      id
      name
      childImageSharp {
        gatsbyImageData(formats: [AUTO, WEBP])
      }
    }
  }
}
`

markdown

---
title: Berserk
stack: [html, scss, bootstrap, jquery]
image: '../../assets/images/cases/berserk/berserk.png'
slug: berserk
url: http://html.berserk.nikadevs.com
client: Nikadevs
date: 2018
---

Berserk is Wordpress template already deployed on themeforest

gatsby-node.js

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query {
      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/(cases)/" } }) {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `)
  data.allMarkdownRemark.nodes.forEach(node => {
    const { slug } = node.frontmatter
    if (!slug) return

    actions.createPage({
      path: `/cases/${slug}`,
      component: path.resolve(__dirname, "./src/pages/case.tsx"),
      context: {
        slug,
        screenshots: `/assets/images/cases/${slug}/screenshots/`,
      },
    })
  })
}

What I did

removed cache and public
installed latest gatsby
npm audit fix
localized depended on data.markdownRemark.frontmatter code to variable and put under condition

Expected result

Success build

Actual result

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

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3450 CPU @ 3.10GHz
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.1 - /c/Users/Thou/AppData/Local/Programs/Python/Python38-32/python
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54)
  npmPackages:
    gatsby: ^3.8.0 => 3.8.0
    gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.4.1
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1
    gatsby-plugin-image: ^1.8.0 => 1.8.0
    gatsby-plugin-manifest: ^3.4.0 => 3.4.0
    gatsby-plugin-next-seo: ^1.7.0 => 1.7.0
    gatsby-plugin-offline: ^4.4.0 => 4.4.0
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2
    gatsby-plugin-sass: ^4.6.0 => 4.6.0
    gatsby-plugin-sharp: ^3.4.1 => 3.4.1
    gatsby-source-filesystem: ^3.4.0 => 3.4.0
    gatsby-transformer-remark: ^4.3.0 => 4.3.0
    gatsby-transformer-sharp: ^3.4.0 => 3.4.0
  npmGlobalPackages:
    gatsby: 3.8.0

gatsbyjs / gatsby

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