Switched Gatsby blog from .md to .mdx — Now my blog-post.js template doesn't return a post title (from front matter) outside of <MDXRenderer>{post.body}</MDXRenderer>

[oliverholms]

#8413 Summary

I converted my Gatsby blog from using .md to .mdx using gatsby-plugin-mdx and following the How to convert an existing Gatsby blog to use MDX tutorial by Thomas Wang.

When I ran gatsby develop I lost the post layout and the generated post title (which came from the frontmatter) for my posts.

I was previously using dangerouslySetInnerHTML and the same template (apart from the changes specified in the above tutorial) and it worked as expected with .md files.

I think that it is something to do with <MDXRenderer>{post.body}</MDXRenderer> ignoring the code outside of it when creating the page with my blog-post.js template.

I have got the layout back by declaring a default layout in the plugin options within my gatsby-config but I can't get the title back. I know that I can just write a heading into the .mdx but I want it generated automatically. Ideally, I would like to access my <Layout /> component from inside the blog-post.js template, so that I don't have to set it from within the gatsby-config plugin options too.

Relevant information

My blog-post.js post template

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import { MDXRenderer } from "gatsby-plugin-mdx"

export default function BlogPost({ data }) {
  const post = data.mdx
  return (
    <Layout>
      <h1>{post.frontmatter.title}</h1>
      <MDXRenderer>{post.body}</MDXRenderer>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
      frontmatter {
        title
      }
    }
  }
`

gatsby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  result.data.allMdx.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

`gatsby-config.js

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  siteMetadata: {
    title: `Oliver Holms`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve("./src/templates/blog-post.js"),
          default: require.resolve("./src/components/layout.js"),
        },
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 2000,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 2000,
      },
    },
    `gatsby-transformer-json`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-feed-mdx`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.excerpt,
                  date: edge.node.frontmatter.date,
                  url:
                    site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
                  guid:
                    site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
              {
                allMdx(
                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  edges {
                    node {
                      excerpt
                      html
                      fields { slug }
                      frontmatter {
                        title
                        date
                      }
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "RSS Feed for www.oliverholms.com",
            // optional configuration to insert feed reference in pages:
            // if `string` is used, it will be used to create RegExp and then test if pathname of
            // current page satisfied this regular expression;
            // if not provided or `undefined`, all pages will have feed reference inserted
            match: "^/blog/",
          },
        ],
      },
    },
  ],
}

Example .mdx

---
title: "Post Title"
date: "2020-08-01"
---

Body Text

Environment (if relevant)

 System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.1 - /usr/local/bin/node
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.125
    Safari: 13.1.2
  npmPackages:
    gatsby: ^2.23.12 => 2.24.47
    gatsby-image: ^2.4.16 => 2.4.16
    gatsby-plugin-emotion: ^4.3.10 => 4.3.10
    gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34
    gatsby-plugin-sharp: ^2.6.27 => 2.6.27
    gatsby-plugin-typography: ^2.5.10 => 2.5.10
    gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12
    gatsby-remark-images: ^3.3.25 => 3.3.25
    gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12
    gatsby-remark-smartypants: ^2.3.10 => 2.3.10
    gatsby-source-filesystem: ^2.3.23 => 2.3.24
    gatsby-transformer-json: ^2.4.11 => 2.4.11
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13
  npmGlobalPackages:
    gatsby-cli: 2.12.87

[Isaac-Tait]

Did you ever sort this out? I am running into what I believe may be the same issue. I keep getting this error in build:

9:09:16 AM: error Building static HTML failed for path "/blog//hello-world/"
9:09:16 AM: 
9:09:16 AM:   16 |           <div className="mt-2">
9:09:16 AM:   17 |             </div>
9:09:16 AM: > 18 |                 <p className="font-semibold text-3xl uppercase text-gray-700">{data.allMdx.frontmatter.title}</p>
9:09:16 AM:      |                                                                                                        ^
9:09:16 AM:   19 |                 <p className="text-gray-600">Posted: {data.allMdx.frontmatter.date}</p>
9:09:16 AM:   20 |                 <hr />
9:09:16 AM:   21 |             <div className="mx-4 text-gray-800">
9:09:16 AM: 
9:09:16 AM:   WebpackError: TypeError: Cannot read properties of undefined (reading 'title')