This might be by design, but the MDXProvider doesn't appear to work when included in a custom layout, e.g.:
import React from 'react'
import { MDXProvider } from '@mdx-js/tag'
import components from './components'
export default ({ children }) =>
<MDXProvider components={components}>
{children}
</MDXProvider>
Specifically, the imported components is being shadowed by components in the compiled output.
import React from 'react'
import { MDXProvider } from '@mdx-js/tag'
import components from './components'
export default ({ components, ...props }) => (
// ...
)
For now, you can simply name the imported components differently or pass components to the component that you receive by importing this MDX file instead. I'll try to figure out how to get around this issue.
I'm not 100% sure how to solve this to be honest. As @silvenon states, it's a result of the components prop being overridden in the transpiled output. I wonder if this is something we should document or if we should rename the components variable in context? The latter would be a breaking change but we could plan to do that in 1.0.
Chatting with @jxnblk he proposed that we don't destructure components from props. Seems a smart way to fix since we don't really need to do the destructuring!
Most helpful comment
Chatting with @jxnblk he proposed that we don't destructure components from props. Seems a smart way to fix since we don't really need to do the destructuring!