gatsby-mdx deprecated, use gatsby-plugin-mdx instead

[JRGould]

Using gatsby-mdx, gatsby was not picking up .mdx files added to the pages directory but it looks like you can just install gatsby-plugin-mdx and use that in gatsby-config.js with no other modifications.

[denvercoder]

I talked to @jlengstorf today and he said that using gatsby-plugin-mdx is in the errata for the course.

There is one additional change that I noticed.

in post.js the query should be

export const query = graphql`
  query($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        author
      }
      body
    }
  }
`

Instead of

export const query = graphql`
  query($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        author
      }
      code {
             body
      }
    }
  }
`

[denvercoder]

For the future generations. I was getting messages in the console:

File not found hello-world
File not found another-post
File not found hello-world
File not found another-post
File not found hello-world
File not found another-post

Every time I would refresh the page I got those messages. I was googling and couldn't find anything so I sat down to carefully check my code against the code in this repo. It was driving me crazy because they matched exactly.

Finally I checked the
package.json
file and found out that I still had the
"gatsby-mdx"
npm package installed.

As soon as I removed it the messages went away.

I (am just assuming) that the gatsby-mdx was creating the messages because it couldn't find any config settings or options in the gatsby-config file.

🤷‍♂

[1Marc]

Added to the course errata. Thanks @denvercoder!