error gatsby-mdx: renderMdxBody was unavailable when rendering html.

I like Gatsby.js - it offers a ton of functionality out of the box and embraces the React ecosystem.

I watched the excellent Frontend Masters course Introduction to Gatsby. I’m blown away by the possibilities Gatsby offers.

But the devil is in the details.

A while ago, I added an RSS feed to my blog. Unfortunately, using the official gatsby-plugin-feed is not as easy as it sounds.

The culprit is mdx again.

I have to fetch html in a query to build the RSS feed. Here’s a code excerpt:

query: `
        {
        allMdx(
          limit: 1000,
          sort: { fields: [frontmatter___date], order: DESC }
          ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
                tags
              }
              excerpt
            }
          }
        }
      }
            `,

When I try to run the queries in my GraphiQL playground, I get this error:

error gatsby-mdx: renderMdxBody was unavailable when rendering html.
>> This is a bug.

Quite mysterious, and I haven’t found a solution yet.

error gatsby-mdx: renderMdxBody was unavailable when rendering html.

Further Reading