Gatsby + Netlify CMS - error Your site's "gatsby-node.js" must set the page path when creating a page

233 views Asked by At

It's saying that path is null and the context > slug is null. However they are defined in my gatsby-node.js file.

It was working locally, now it's not. Trying to figure out why this is happening. Searched Google and S/O, can't seem to find an answer.

Here's the error below when deploying to Netlify:

10:51:57 AM: error Your site's "gatsby-node.js" must set the page path when creating a page.
10:51:57 AM: The page object passed to createPage:
10:51:57 AM: {
10:51:57 AM:     "path": null,
10:51:57 AM:     "component": "/opt/build/repo/src/templates/blogTemplate.js",
10:51:57 AM:     "context": {
10:51:57 AM:         "slug": null
10:51:57 AM:     }
10:51:57 AM: }

My front matter markdown in my blog post files are:

---
title: example
slug: /posts/example/
date: 2019-03-26T23:53:24.128Z
excerpt: >-
  example description
---

My gatsby-node.js:

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions
  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }
  `)
  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.slug,
      component: blogPostTemplate,
      context: {
        // additional data can be passed via context
        slug: node.frontmatter.slug,
      },
    })
  })
}

My blogTemplate.js file:

import React from "react"
import { Container, Row, Col } from "reactstrap"
import { Helmet } from "react-helmet"
import Nav from "../../components/Nav/nav"
import InnerHero from "../../components/innerHero/innerHero"
import CTA from "../../components/CTA/cta"
import Footer from "../../components/Footer/footer"
import { graphql } from "gatsby"
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  return (
    <>
      <Helmet>
        <title>{frontmatter.title} - Infused</title>
        <meta
          name="description"
          content={frontmatter.excerpt}
        />
      </Helmet>
      <Nav/>
      <InnerHero title={frontmatter.title}/>
      <section className="inner-content">
        <Container className="single-blog">
        <Row>
          <Col lg="12">
              <div className="blog-post">
                <div
                  className="blog-post-content"
                  dangerouslySetInnerHTML={{ __html: html }}
                />
                </div>
            </Col>
          </Row>
        </Container>
      </section>
      <CTA/>
      <Footer/>
    </>
  )
}
export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        excerpt
      }
    }
  }
`
0

There are 0 answers