JavaScript for WordPress Forums Gatsby Gatsby Basics: gatsby-mdx is depreciated, use gatsby-plugin-mdx instead

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #117588
    Stuart
    Participant

    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 2 months, 2 weeks ago by Zac Gordon.
    #117589
    Zac Gordon
    Keymaster

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

    #121461
    Alex Fornuto
    Participant

    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 2 months, 4 weeks ago by Alex Fornuto. Reason: Adjust formatting
    #125503
    Leland Fiegel
    Participant

    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!

    #133545
    Jory Goehle
    Participant

    Thanks Leland Fiegel!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.