Unable to reference frontmatter fields inside MDX

[AAverin]

Description

Documentation states https://www.gatsbyjs.org/docs/mdx/writing-pages/
that Frontmatter is also available in props.pageContext.frontmatter and can be accessed in blocks of JSX in your MDX document:

When I try to read my frontmatter inside mdx I get an error: Cannot read property 'frontmatter' of undefined

System:
OS: macOS 10.15.2
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.1 - /usr/local/bin/node
npm: 6.13.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
npmPackages:
gatsby: ^2.15.15 => 2.15.15
gatsby-image: ^2.2.19 => 2.2.19
gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
gatsby-plugin-catch-links: ^2.1.9 => 2.1.9
gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3
gatsby-plugin-google-analytics: ^2.1.16 => 2.1.16
gatsby-plugin-google-gtag: ^1.1.8 => 1.1.8
gatsby-plugin-mdx: ^1.0.41 => 1.0.41
gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
gatsby-plugin-sharp: ^2.2.22 => 2.2.22
gatsby-plugin-sitemap: ^2.2.12 => 2.2.12
gatsby-plugin-styled-components: ^3.1.5 => 3.1.5
gatsby-remark-autolink-headers: ^2.1.10 => 2.1.10
gatsby-remark-copy-linked-files: ^2.1.19 => 2.1.19
gatsby-remark-images: ^3.1.22 => 3.1.22
gatsby-source-filesystem: ^2.1.22 => 2.1.22
gatsby-transformer-json: ^2.2.25 => 2.2.25
gatsby-transformer-remark: ^2.6.22 => 2.6.22
gatsby-transformer-sharp: ^2.2.14 => 2.2.14
npmGlobalPackages:
gatsby-cli: 2.8.29

[AAverin]

Maybe docs need to be updated?
I am using MDXRenderer and nothing was accessible until I have manually passed a parameter

<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>

[johno]

The guide you're referring to refers to pages in src/pages. They automatically expose the frontmatter under pageContext.

However, it looks like you're using a programmatically created page, so you'd need to pass the queried frontmatter directly into MDXRenderer to add it to the scope of MDX. It looks like that step is missing from the docs.

Would you be interested in adding it?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[brootle]

this must be definitely mentioned in the documentation, I had same problem as I generate all pages based on md, mdx files :)

[lambertbrady]

I've run into the same problem - on top of that, passing frontmatter as a prop to MDXRenderer breaks the build when trying to use it, even though gatsby develop works just fine. Here's my usage:

In my post component:
<MDXRenderer frontmatter={post.frontmatter}>{post.body}</MDXRenderer>

In my index.mdx file:

---
title: Hello World
---

<p>{props.frontmatter.title}</p>

Running gatsby develop displays the frontmatter output as expected. Running gatsby build throws an error:

gatsby-plugin-mdx
TypeError: Cannot read property 'title' of undefined