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

[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, 5 months ago by Alex Fornuto. Reason: Adjust formatting