Gatsby
Up and Running with Gatsby: Taking Gatsby to Production

Fixing the Build: Part 2

PRO

Let's finish up fixing our code to work in production.

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.