Outline
We've still got two errors to fix in our production build.
The first problem is that our createPages
function in gatsby-node.js
is bringing in too many files; it's bringing in all of the Markdown and MDX files we have and trying to create pages for them. This is because we added src
to our gatsby-source-filesystem
, so pages like events.mdx
will be included in this function. To fix this, we just need to add the same filter we did to events.mdx
to the query in createPages
. Updated const result
in gatsby-node.js
to this:
// gatsby-node.js
// inside of export.createPages
const result = await graphql(`
query {
allMdx(filter: { fileAbsolutePath: { regex: "//content/events//" } }) {
edges {
node {
id
fields {
slug
}
}
}
}
}
`)
This will ensure we're only creating pages for the MDX files inside of content/events
.
The final problem is that we've left our template files inside of our src/pages
folder. We need to move event-layout.js
and markdownpage-template.js
into a new src/templates
folder. We refer to each of these files elsewhere, so we need to fix those references.
First, update createPages
again in gatsby-node.js
:
// gatsby-node.js
// inside of export.createPages
posts.forEach(({ node }, index) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/event-layout.js`),
context: { id: node.id },
})
})
Next, update gatsby-config.js
to fix the reference to the Markdown page layout in the gatsby-plugin-mdx
configuration:
// gatsby-config.js
plugins: [
// everything else the same
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
defaultLayouts: {
default: require.resolve("./src/templates/markdownpage-template.js"),
},
plugins: [`gatsby-remark-images`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 400,
},
},
],
},
},
]
When you run gatsby build
now, you should no longer see any errors.
These kinds of things happen all the time, so it's good practice for you to see them here. Let's start learning about adding some metadata to our site in the next video.