Mdx: MDXProvider doesn't seem to work in a custom layout

Created on 28 Jul 2018  路  3Comments  路  Source: mdx-js/mdx

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>
good first issue 馃憢 馃悰 typbug

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!

All 3 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

egoist picture egoist  路  5Comments

dioptre picture dioptre  路  3Comments

valse picture valse  路  4Comments

deligent-ant picture deligent-ant  路  3Comments

ludwigfrank picture ludwigfrank  路  3Comments