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
}
}
}
`