ChristopherBiscardi/gatsby-mdx

Invalid prop supplied to React.Fragment

itwasmattgregg opened this issue · 1 comments

I'm getting this error in the browser console when navigating to a post rendered with MDXRenderer:

index.js:2177 Warning: Invalid prop `_frontmatter` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
    in Fragment (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by MDXRenderer)
    in MDXRenderer (at blog-post.jsx:64)

It seems to render on the page ok thought so not really sure at all what is going on.

MDX 1.0 changed the default wrapper to be React.Fragment and also merged defaultLayouts with wrappers so they are the same thing now. The warning can be solved by using MDXProvider to only pass children through to the fragment.

// gatsby-browser.js
import React from "react"
import { MDXProvider } from "@mdx-js/react"

const components = {
	wrapper: ({children}) => <>{children}</>
}
export const wrapRootElement = ({ element }) => {
  return (
    <MDXProvider components={components}>
      {element}
    </MDXProvider>
  )
}

Although you're probably just on an old version of mdx and should upgrade to at least 1.0.6