MDXRenderer is not working

[ryotaro-tenya0727]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I am sorry that my English is so bad
I'm beginner with gatsby

I want to display mdx's body with MDXRenderer
In the page using MDXRenderer , this error occured
Not using MDXRenderer ,I can display mdx Id body and so on

src/templates/blog-post.js

import * as React from "react"
import { Link, graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

const BlogPostTemplate = ({ data, location }) => {
  const post = data.mdx
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data

  return (
    <Layout location={location} title={siteTitle}>
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{post.frontmatter.title}</h1>
          <p>{post.frontmatter.date}</p>
        </header>
        <MDXRenderer>{post.excerpt}</MDXRenderer>
        <hr />
        <footer>
          <Bio />
        </footer>
      </article>
      <nav className="blog-post-nav">
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previous && (
              <Link to={previous.fields.slug} rel="prev">
                ← {previous.frontmatter.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={next.fields.slug} rel="next">
                {next.frontmatter.title} →
              </Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    mdx(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      body
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

package.json

{
  "name": "gatsby-starter-blog",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "dependencies": {
    "@babel/runtime": "^7.16.0",
    "@mdx-js/mdx": "^2.0.0-next.9",
    "@mdx-js/react": "^2.0.0",
    "gatsby": "^4.6.0",
    "gatsby-plugin-feed-mdx": "^1.1.0",
    "gatsby-plugin-gatsby-cloud": "^4.6.0",
    "gatsby-plugin-google-analytics": "^4.6.0",
    "gatsby-plugin-image": "^2.6.0",
    "gatsby-plugin-manifest": "^4.6.0",
    "gatsby-plugin-mdx": "^3.5.0",
    "gatsby-plugin-offline": "^5.6.0",
    "gatsby-plugin-react-helmet": "^5.6.0",
    "gatsby-plugin-sharp": "^4.6.0",
    "gatsby-remark-copy-linked-files": "^5.6.0",
    "gatsby-remark-images": "^6.6.0",
    "gatsby-remark-prismjs": "^6.6.0",
    "gatsby-remark-responsive-iframe": "^5.6.0",
    "gatsby-remark-smartypants": "^5.6.0",
    "gatsby-source-filesystem": "^4.6.0",
    "gatsby-transformer-sharp": "^4.6.0",
    "prismjs": "^1.25.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "prettier": "^2.5.1"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
}

Reproduction Link

https://www.gatsbyjs.com/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/#what-is-mdx-

Steps to Reproduce

I followed this mdx convert guide
https://www.gatsbyjs.com/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/#what-is-mdx-

Expected Result

Displaying mdx's body with MDXRenderer

Actual Result

Unhandled Runtime Error occured

Environment

System:
    OS: MacOS monterey
    CPU: 2 GHz クアッドコアIntel Core i5           
  npmPackages:
    "@mdx-js/mdx": "^2.0.0-next.9",
    "@mdx-js/react": "^2.0.0",
    "gatsby": "^4.6.0",
    "gatsby-source-filesystem": "^4.6.0",
    "gatsby-plugin-mdx": "^3.5.0",

Config Flags

No response

[hyunjaesung]

My MDXRenderer doesn't work too!!!

[LekoArts]

You need to use v1 of @mdx-js/mdx and @mdx-js/react (via npm install @mdx-js/mdx@v1 @mdx-js/react@v1) until gatsby-plugin-mdx is compatible with v2

[NazAnton]

@LekoArts how to render MDX with the latest version when just fetching MDX as node not creating a whole page from MDX ?

I have the same question. I have an entire site built around this feature. I dynamically request the content of different .mdx files for different pages and insert the rendered MD content into my page templates. I rely on the same scheme.

     <MDXProvider components={components}>
       <MDXRenderer>{mdx.body}</MDXRenderer>
     </MDXProvider>

I can't take and switch dynamic build of .jsx pages to static *.mdx files. This is simply impossible in my case.

Is there a workaround to work with gatsby-plugin-mdx v5+ and have the same behavior as v3.

Now body is just a flat content of .mdx file. I understand that in v3 .mdx file content was rendered by @mdx-js/mdx. Maybe someone have any recipe on how to use it instead of MDXRenderer?

Will appreciate any help.

[rburgst]

see alyo #25068 (reply in thread) and #37301

[K20shores]

@NazAnton were you ever able to find a work around for this? Or, @LekoArts, do you have any guidance for this?

[brootle]

Anyone found a solution? I decided to upgrade to Gatsby 5 and MDXProvider and MDXRenderer not working anymore, a lot of my doc pages have custom React components and I can't just go without them. I can't believe this got broken in later Gatsby upgrades...

<MDXProvider components={shortcodes}>
  <MDXRenderer>{mdx.body}</MDXRenderer>
</MDXProvider>    

[Gujarats]

I'm trying to build my blog using Gatsby, and firstime when using markdown is working, but when updated using mdx all that stuff not working, cant even render the body.

[NazAnton]

https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#updating-page-templates

Another question is how do I actually get these "children" as props in my component? I'm not new to the Gatsby framework, and I still can't figure this example out. Please, clarify a bit.

[jideabdqudus]

Upvoting because I'm currently experiencing this issue and I'm stuck on it for a while.

[jessapp]

I was also having this issue, and here is how I solved it:

When you're using the createPage action, you need to use this URL pattern for your page component: your-layout-component.js?__contentFilePath=absolute-path-to-your-mdx-file.mdx. Without the contentFilePath argument, children don't get passed through as props.

See here for details.

[ebuildy]

I end up by using compileMDXWithCustomOptions (import { compileMDXWithCustomOptions } from 'gatsby-plugin-mdx'):

Here my example of a resolver:

const remarkGfm = require('remark-gfm');

   /**
     * Resolver to compile MDX string to JSX string
     */
    const compileMDXResolver = {
      type: `DescriptionBody`,
      async resolve(node, args, context, info) {
        const result = await compileMDXWithCustomOptions(
          {
            source: node.description,
            absolutePath: __dirname + '/src/pages/events/list/index.mdx',
          },
          {
            pluginOptions: {
              plugins: []
            },
            customOptions: {
              mdxOptions : {
                outputFormat: 'function-body',
                jsxRuntime: 'automatic',
                jsx: false,
                useDynamicImport: true,
                remarkPlugins: [
                  remarkGfm,
                ],
              }
            },
            getNode,
            getNodesByType,
            pathPrefix,
            reporter,
            cache,
            store,
          }
        )

        return { value: result.processedMDX.toString() }
      }
    }

And the React component:

import React from 'react'
import { useState, useEffect, Fragment } from 'react'
import * as runtime from 'react/jsx-runtime'
import {MDXProvider, useMDXComponents} from "@mdx-js/react"
import PropTypes from 'prop-types';

import { run } from '@mdx-js/mdx'

export default function MyMDX({code}) {

  const [mdxModule, setMdxModule] = useState()

  const Content = mdxModule ? mdxModule.default : Fragment

  useEffect(() => {
    ;(async () => {
      setMdxModule(await run(code, {...runtime, useMDXComponents}))
    })()
  }, [code])

  return (
      <Content />
  )
}

MyMDX.propTypes = {
  code: PropTypes.string,
}

MyMDX.defaultProps = {
  code: '',
}

Then I use the provider:

import { MDXProvider } from "@mdx-js/react"

....
<.....>
<MDXProvider>
    {children}
</MDXProvider>
</....>

[NazAnton]

Oh, thank you very much! I will be able to test this approach a bit later, maybe this weekend. Anyway, as soon as I get the result, I'll report back here.

From the very beginning, I thought to do something like this:

import { compile } from '@mdx-js/mdx';

const exampleMDX = await fs.readFile('example.mdx');
const children = await compile(exampleMDX);

But instead of using fs.readFile, use that body because it already contains the text content of the file, which is the same thing. And also don't modify the result of the "gatsby-plugin-mdx" query directly, but rather use it and after getting the "body" compile it to JSX component with compile, and then pass it as a prop to my page component on creation -> createPage({ ... , context : { ...children...}, ...). At this stage, I have not yet fully understood which approach will be easier to implement. So, i will try both.

Anyway, ebuildy, thanks again!

[jideabdqudus]

Thank you for the snippet @ebuildy, wish I saw this earlier. What I did to get my project working was to downgrade my versions of @mdx-js/mdx @mdx-js/react and gatsby-plugin-mdx. to v1

Also tried what @NazAnton suggested by didn't seem to work.

[Mi-La]

@ebuildy Hi, I have problem to run the compiled code. It seems that it contains import statement to react and I'm stil getting errors like:

Uncaught (in promise) TypeError: The specifier “react” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

Any hints?

[Mi-La]

I can run code compiled using normal 'compile' from @mdx-js/mdx

[jideabdqudus]

Hello @NazAnton I tried what you suggested above, but then I'm only getting the value back as a parsed string, this is what my code looks like:

const [value, setValue] = React.useState<any>('');

 React.useEffect(() => {
  async function compileMDX() {
   try {
    const exampleMDX = await data.mdx.body;
    const children = await compile(exampleMDX);
    setValue(children.value);
   } catch (err) {
    console.log(err);
   }
  }
  compileMDX();
  //eslint-disable-next-line
 }, []);

After setting the mdx value to state, I then render its value on the UI like this:

<MDXProvider components={MDXComponents}>
 <Fragment>
   {value}
 </Fragment>
</MDXProvider>

Unfortunately, what I get rendered back is the string, is there a way to render the component itself after compiling?

Current Result:

Expected Result:

[NazAnton]

Handling MDX rendering without MDXRenderer

General

Here is my report.

I solved all the MDX issues with the new "gatsby-plugin-mdx" v4 breaking changes approach. But before I show the updated approach, I'll show how I did things with "gatsby-plugin-mdx" v3 to compare the two approaches.

*All of the code snippets below are very generic. They are only shown as illustrations to accompany my explanations to make it easier for you to understand how things work. Don't mindlessly copy them into your project.

Initial approach v3

At the Node layer.

I queried the required .mdx file. Then extract a body from data that was returned from the query. That body, in turn, contains function, compiled from .mdx file content. Then, during the page creation phase, I provide a path to the appropriate template component trough component prop of the createPage API. Additionally, I pass the body through context prop of createPage API.

At the Client layer.

In the template component I get the body from the pageContext and use it as children of the MDXRenderer component wrapped onto MDXProvider.

Code v3

Query data for article.mdx files

const queriedData = await graphql(`
  query articlesMDX {
    allFile(
      filter: {
        name: { eq: "article" }
      }
    ) {
      edges {
        node {
          childMdx {
            body
          }
        }
      }
    }
  }
`);

Page creation phase

const articlesTemplateComponentPath = path.resolve('./some-path-to/ArticlesTemplateComponent.jsx');
const { body } = queriedData.data.allFile.edges[someIndex].node.childMdx;

createPage({
  path: '/some-path-for-article',
  component: articlesTemplateComponentPath,
  context: { body },
})

Articles Template Component

import { MDXProvider } from "@mdx-js/react";
import { MDXRenderer } from "gatsby-plugin-mdx";

const components = [
  /** ...some custom components used in MDX files */
]

function ArticlesTemplateComponent({ pageContext: { body } }) {
  return (
    <MDXProvider components={components}>
      <MDXRenderer>
        {body}
      </MDXRenderer>
    </MDXProvider>
  );
}

New approach v4+

At the Node layer.

I queried the required .mdx file. Then extract not a body but contentFilePath from data that was returned from the query. Then, during the page creation phase, I create special query string with both, the path to appropriate template component and contentFilePath, as a path to required .mdx file. Then I apply that special string as component prop of createPage API.

At the Client layer.

In the template component I get the children (it is a sibling of pageContext), not the body and then use it as a children of MDXProvider directly, without using MDXRenderer at all.

Code v4

Query data for article.mdx files

const queriedData = await graphql(`
  query articlesMDX {
    allFile(
      filter: {
        name: { eq: "article" }
      }
    ) {
      edges {
        node {
          childMdx {
            internal {
              contentFilePath
            }
          }
        }
      }
    }
  }
`);

No more body here, only the contentFilePath.

Page creation phase

const articlesTemplateComponentPath = path.resolve('./some-path-to/ArticlesTemplateComponent.jsx');
const { contentFilePath } = queriedData.data.allFile.edges[someIndex].node.childMdx.internal;
const specialQueryString = `${articlesTemplateComponentPath}?__contentFilePath=${contentFilePath}`;

createPage({
  path: '/some-path-for-article',
  component: specialQueryString,
})

No body trough context and, more important, now component is not just a path to a JSX file template, but a query that contain both, template file path and path to desired MDX file.

This is where the magic happens. More on that here.

Articles Template Component

import { MDXProvider } from "@mdx-js/react";

const components = [
  /** ...some custom components used in MDX files */
]

function ArticlesTemplateComponent({ children }) {
  return (
    <MDXProvider components={components}>
      {children}
    </MDXProvider>
  );
}

After createPage gets component as query width MDX file path, the children is available as one of template component prop. And it should be used without MDXRenderer, just as usual React components.

Conclusion

I should note that I wasn't very careful when reading the v3 to v4 migration guide and literally missed the query string trick. But when I carefully studied the documentation, everything became clear.

Another thing to note is that the migration is worth 20 minutes of work if you have an approach like mine and build pages programmatically. A few changes to the GraphQL query, a few to the createPage API, and a few minor changes to the page template component. But if you're embedding GraphQL queries directly into your page components, well, then the migration will take a while...

[NazAnton]

Compiling MDX by yourself without "gatsby-plugin-mdx"

General

Hi @jideabdqudus,
The following solution may interest you.

If you're only using one .mdx file per template, the above guide will satisfy your needs perfectly, and the following solution will be redundant for you. But I, for instance, use multiple .mdx files per template, then you might find something useful here.

For ease of further explanation, let's say article.mdx is the main content on a page and excerpt.mdx is the short description of it, somewhere at the top of the page.

Since the new approach does not allow you to provide multiple .mdx files to this special query string, you will have to handle the additional .mdx content yourself.

The Gatsby is using external tools to process MDX content. Specifically, the MDX-JS project that provides all the tools. So, why not use these tools directly in the project yourself, without using "gatsby-plugin-mdx" at all?

But first, more about my excerpt.mdx file. In my project, it is full fledged MDX with custom tags and MDX syntax. Simple plain text doesn't meet the needs of my project, so I literally need to have multiple MDX files to render a single page.

There is one major difference compared to my article.mdx files - I have no imports in the excerpt.mdx files. I'm not saying that a home-brewed MDX compilation won't work with imports, but I am saying that I haven't tried this approach yet with .mdx files that contain import expressions. So it's good to know before experimenting with compile.

*All of the code snippets below are very generic. They are only shown as illustrations to accompany my explanations to make it easier for you to understand how things work. Don't mindlessly copy them into your project.

Query data for excerpt.mdx files

const queriedData = await graphql(`
  query articlesMDX {
    allFile(
      filter: {
        name: { eq: "excerpt" }
      }
    ) {
      edges {
        node {
          childMdx {
            internal {
              contentFilePath
            }
            body
          }
        }
      }
    }
  }
`);

Page creation phase

const articlesTemplateComponentPath = path.resolve('./some-path-to/ArticlesTemplateComponent.jsx');
const { body, internal } = queriedData.data.allFile.edges[someIndex].node.childMdx;

/** https://mdxjs.com/packages/mdx/#compilefile-options */
const functionBody = await compile(
  { path: internal.contentFilePath, value: body },
  { outputFormat: 'function-body' }
);

createPage({
  path: '/some-path-for-article',
  component: articlesTemplateComponentPath,
  context: { excerptFunctionBody: functionBody.value },
})

The body here is literally the contents of the .mdx file (without the frontmatter part). So it's easier to use it that way than to read the .mdx file from drive yourself.

For simplicity, I don't show the code related to article.mdx here, but in practice I use the Gatsby-way shown above. That is, I have a mixed approach.

I'm also intentionally not showing you how I import { compile } from '@mdx-js/mdx'. Because Gatsby build is CommonJS environment but "@mdx-js/mdx" package is ESM only. Since this part is beyond the scope of this topic, you will have to solve it for your project yourself.

Articles Template Component

import * as runtime from 'react/jsx-runtime';
import { runSync } from '@mdx-js/mdx';

const components = [
  /** ...some custom components used in MDX files */
]

function ArticlesTemplateComponent({ pageContext: { excerptFunctionBody } }) {
  /** https://mdxjs.com/packages/mdx/#runsyncfunctionbody-options */
  const Excerpt = runSync(excerptFunctionBody, runtime).default;

  return (
    some code...

    <Excerpt components={components} />

    some code...
  );
}

Note, that I do not use here not only "gatsby-plugin-mdx", but MDXProvider either. I pass all custom components, used in my MDX files, as a prop directly to compiled (run'ed) Excerpt component.

Conclusion

Does this mean you can do not use Gatsby's solution at all to handle MDX content? It seems so. But I still prefer to use "gatsby-plugin-mdx" whenever possible so that my own code is cleaner and not cluttered with my own versions of solutions when there is no need for it and when the same functionality is already provided by ready-made plugins/ packages.

[jideabdqudus]

Hello @NazAnton thanks for the impressive breakdown, you did a great job explaining the complex parts and the entire flow. I just tried your workable solution and it just seemed to work and I could style using the components prop as well which is a plus.

One suggestion though, there isn't any resource/documentation out there that explains this properly, can your solution/explanation be made into a blog post or article? So other developers could take a peek if they run into the same challenge?

If you aren't willing to do this, can you permit me to do this using your explanation?

[NazAnton]

If you aren't willing to do this, can you permit me to do this using your explanation?

Hi @jideabdqudus! Sorry for the late reply. I don't run any programming related blog. But I don't mind at all if you post this solution on your blog and it helps someone else. All I ask is that you simply credit me as the initial author. A link to my GitHub profile will do the trick.

[werk-12]

@jideabdqudus I would be happy too and very thankful about an easy and working example to solve using mdx in gatsby v5
MDXrenderer was so easy to use and now it looks so complicated, but maybe it is because I do not understand well.

[keepyourreceipt]

I've been working on a project where I'm querying MDX files in my Gatsby project. I was struggling with rendering the MDX body without the V3 render method. I saw this discussion and still wan't able to figure it out, so I wanted to post my solution, incase it's helpful to anyone still struggling with this.

I'm using synchronous methods here, passing the raw MDX body from from graphQL query to the compileMDX method that I created. The once I get the compiled MDX I use the runSync method to generate a renderable React component.

I'm not sure about using this as it calls eval(), but I was thinking that since this is compiled by Gatsby on a static site I wouldn't have too many issues. Open to thoughts on this though.

import * as runtime from "react/jsx-runtime";
import { compileSync, runSync } from "@mdx-js/mdx";
import React, { useEffect, useState } from "react";

function compileMDX(mdx) {
  const code = String(
    compileSync(mdx, {
      outputFormat: "function-body",
      development: false,
    })
  );

  return code;
}

export default function Hero(props) {
  const { data_for_block } = props;
  const [content, setContent] = useState();    

  useEffect(() => {
    // props.data_for_blocks.body is the raw MDX body
    const code = compileMDX(props.data_for_block.body);

    const { default: Content } = runSync(code, runtime);
    setContent(Content());
  }, []);

  return <div className="Hero">{content && content}</div>;
}

[duongkhlinh]

Solution worked with gatsby-plugin-mdx version 5.7.0

Here is my solution, worked like a charm. I had a very emotional moment when it finally worked after so many hours trying so many different things. I just wanted to hit my head against the wall but I'm glad I didn't lol. Hope this can be helpful to someone.

My issue

I have 1 template and multiple mdx files. Wanted to use the template to create multiple pages and want to generate the content into HTML straight from mdx files.

Checked all of the documents and solutions but I couldn't understand how this

<MDXProvider components={components}>
  {data.mdx.body}
</MDXProvider>

becomes this

<MDXProvider components={components}>
  {children}
</MDXProvider>

I tried changing body to children but children was undefined and I kept getting errors. I thought children would be the same with body but in fact it wasn't. Not even close.

• body: a string (basically the content from md / mdx). For example "\nSome introduction text.\n\n# Heading H1"
• children: the transformed MDX. FYI, my console.log looks like this: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
  This was also mentioned briefly in the official document:

Instead of querying for the body on the MDX node, the page template now receives the transformed MDX as children property.

Detailed implementation

As mentioned by jessapp above, the contentFilePath is crucial for children to be passed.

I was also having this issue, and here is how I solved it:

When you're using the createPage action, you need to use this URL pattern for your page component: your-layout-component.js?__contentFilePath=absolute-path-to-your-mdx-file.mdx. Without the contentFilePath argument, children don't get passed through as props.

See here for details.

Here is my detailed solution (Note that names and paths are random so please change them according to your own project)

gatsby-node.js

const path = require('path')

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  const yourTemplate = require.resolve("path-to-your-template/your-template.jsx")

  return graphql(`
    {
      allMdx {
        edges {
          node {
            frontmatter {
              path
            }
            id
            internal {
              contentFilePath
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      return Promise.reject(result.errors)
    }

    result.data.allMdx.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: `${yourTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
        context: {
          path: node.frontmatter.path,
        },
      })
    });
  })
};

your-template.jsx

import * as React from 'react';
import { graphql } from 'gatsby';
import { MDXProvider } from '@mdx-js/react';

const YourPost = ({ data, children }) => {

  // These settings are just random so you can customize your own settings here
  // FYI: https://www.gatsbyjs.com/docs/how-to/routing/customizing-components/
  const MyH1 = props => <h1 style={{ color: `tomato` }} {...props} />
  const MyParagraph = props => (
    <p style={{ fontSize: "18px", lineHeight: 1.6 }} {...props} />
  )

  const components = {
    h1: MyH1,
    p: MyParagraph,
  }

  return (
    <div>
        <MDXProvider components={components}>
          {children}
        </MDXProvider>
    </div>
  )
}

export const query = graphql`
  query ($path: String!) {
    mdx(frontmatter: {path: {eq: $path}}) {
      frontmatter {
        path
      }
    }
  }
`

export default YourPost

gatsby-config.js

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  siteMetadata: {
    title: `YOUR SITE TITLE`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        "name": "pages",
        "path": `${__dirname}/pages/` // This is where the MDX & MD files are located
      },
      __key: "pages"
    }
  ]
};

[brootle]

God bless you!! In my createPage I had component: path.resolve(./src/templates/post.js), and adding ?__contentFilePath=${node.internal.contentFilePath} to the path saved the day... I also couldn't understand where children was coming from. I was just using

  <MDXProvider components={shortcodes}>
    <MDXRenderer>{mdx.body}</MDXRenderer>
  </MDXProvider>   

and now this below finally works in Gatsby 5

<MDXProvider components={shortcodes}>
  {children}
</MDXProvider>

[duongkhlinh]

Glad to know it worked for you!!
Gatsby seriously needs better documentation 😂

[brootle]

I agree... their docs are very basic, I am also migrating from v2 to v5 and this thing with MDXProvider was the most painful part so far, there is no way I would figure it out without finding your post 👍

[85Ryan]

I just upgraded to V5 as well, And I also used {children} instead of <MDXRenderer>{mdx.body}</MDXRenderer>, but I encountered a new problem.

My project uses the gatsby-plugin-react-i18next to make the website multilingual, the following is my create page function:

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  const support = await graphql(`
    query {
      support: allFile(filter: { sourceInstanceName: { eq: "support" } }) {
        nodes {
          childMdx {
            frontmatter {
              slug
            }
            internal {
              contentFilePath
            }
          }
        }
      }
    }
  `)

  if (support.errors) {
    reporter.panicOnBuild(support.errors)
    return
  }

  const supportTemplate = path.resolve(`./src/templates/support.js`)
  support.data.support.nodes.forEach(({ childMdx: node }) => {
    createPage({
      path: `/support/${node.frontmatter.slug}`,
      component: `${supportTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
      context: {
        slug: node.frontmatter.slug
      }
    })
  })
}

Each mdx file uses the field -> locale field to determine the corresponding language.

The query function in the template file is as follows:

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

If I use children to retrieve the content, but the retrieved content is in a mixed language, some are normal and some are incorrect, and I don't know where the problem lies.

[malfborger]

what if you want to render the body as jsx on allMdx and in for example a list view and not only on the separate single page for the post?

[thibaultcrouzet]

Hey @LekoArts, I'm exploring ways to swap out MDXRenderer within a component. While I've got the hang of generating pages with templates using createPage, I occasionally find myself wanting to render the body of certain MDX files directly within components. Any suggestions or insights on how to accomplish this?
For example in the page of a service I would like to show some testimonials.
Thanks for your help