Invalid prop supplied to React.Fragment
itwasmattgregg opened this issue · 1 comments
itwasmattgregg commented
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.
ChristopherBiscardi commented
MDX 1.0 changed the default wrapper
to be React.Fragment
and also merged defaultLayouts with wrapper
s 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>
)
}
- Here's a video explaining how to do it.
- Here's a working repo with the changes you'll need to make.
Although you're probably just on an old version of mdx and should upgrade to at least 1.0.6