Gatsby Basics: gatsby-mdx is depreciated, use gatsby-plugin-mdx instead

[Stuart]

Hi Zac,

Unfortunately your video on the Gatsby Basics course Creating Content with Markdown (MDX) is now out of date because gatsby-mdx is depreciated.

I managed to switch to using gatsby-plugin-mdx and it works fine, also the video is a lot longer than 5:03 🙂

This error also effects the next video Creating Dynamic Page Templates. There is no longer a code object in mdx, only body and when I try to code along as per the instructions I get an error:

ERROR #85907 GRAPHQL

There was an error in your GraphQL query:

– Unknown field ‘code’ on type ‘Mdx’.

To fix this you have to do:

query MyQuery($slug: String!) {
mdx(frontmatter: { slug: { eq: $slug } }) {
frontmatter {
title
}
body
}
}

and

export default ({
data: {
mdx: {
frontmatter: { title },
body: content,
},
},
}) => (
<Layout>
<h1>{title}</h1>
<MDXRenderer>{content}</MDXRenderer>
</Layout>
)

Now I get the post body showing 🙂

• This topic was modified 4 years, 5 months ago by Zac Gordon.

[Zac Gordon]

Thanks for the ping! Actually update this in a later video, but will link to this from the video!

[Alex Fornuto]

Related, when I got to Adding React Components to MDC Files, I was unable to load the Shoutout component from within the markdown file. To resolve:

1. Go to posts.js and add:

   
   import { MDXProvider } from "@mdx-js/react"
   import Shoutout from "../components/shoutout"
   
   const shortcodes = {
       Shoutout
   }
   

2. And where you import the content, adjust to:

   
           <MDXProvider components={shortcodes}>
               <MDXRenderer>{content}</MDXRenderer>
           </MDXProvider>
   

3. Now in your markdown file, you can use <Shoutout> tags without importing.

I hope this helps others.

• This reply was modified 4 years, 6 months ago by Alex Fornuto. Reason: Adjust formatting

[Leland Fiegel]

Just wanted to add to this post because it is linked to from this lesson: https://javascriptforwp.com/courses/gatsby-basics/sections/creating-content-with-markdown-mdx-503/

I found that I couldn’t see allMdx available in GraphiQL content without some changes.

Instead of npm installing gatsby-mdx, install gatsby-plugin-mdx, as described here: https://www.gatsbyjs.org/docs/mdx/getting-started/#add-mdx-to-an-existing-gatsby-site

If you already followed along with the tutorial:

– In your project directory, remove the ‘gatsby-mdx’ line in your package.json
– Delete package-lock.json
– Run the following terminal command in the project directory: npm install –save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
– This will update your package.json and generate a new package-lock.json file
– Reference your newly installed gatsby-plugin-mdx plugin in gatsby-config.js (merely replacing with “gatsby-mdx” with “gatsby-plugin-mdx” seems to do the trick)
– Run: gatsby develop
– At this point, you will see a new “allMdx” section in your GraphiQL which means it can now be queried just like in the course video

Hope this helps!

[Jory Goehle]

Thanks Leland Fiegel!

[Author]

Posts