wrapper doesn't seem to be working

[kyunghoon]

Subject of the issue

i'm trying to use the wrapper functionality described in the documentation

Your environment

mac osx, mojave
"@mdx-js/mdx": "^1.0.20",
"@mdx-js/react": "^1.0.20",
yarn --version 1.5.1
npm --version 6.4.1

Steps to reproduce

i have the following code

// default.tsx

import * as React from 'react';
import { MDXProvider } from '@mdx-js/react';

const wrapper = (props: { children: React.ReactNode }) => {
  throw new Error('!!!');
}

export default (props: { children?: React.ReactNode }) =>
  <MDXProvider components={{ wrapper }}>
    {props.children}
  </MDXProvider>


// layout.mdx

# Hello world

Expected behaviour

i expected the exception to be thrown

Actual behaviour

outputs "Hello world"

---

furthermore, when i try to import an mdx file import MDXDocument from './test.mdx'

i get an undefined import error, however if i add export default ({ children }) => <>{children}</> to the mdx, it works, but i assume if the wrapper was working correctly, i wouldn't need that line, and it would just use the wrapper?

[johno]

Can you provide a reproduction @kyunghoon? This should be working so I wonder if it has something to do with your environment. Or, MDXCreateElement might be swallowing the error somehow.

[agneym]

@johno Can you take a look at this repo. I'm trying to use the same example from the documentation for reversing children, but the function does not seem like the function is being called.

 <MDXProvider
    components={{
      h1: H1,
      wrapper: ({ children, ...props }) => {
        console.log(props, children)
        const reversedChildren = React.Children.toArray(children).reverse()
        return <>{reversedChildren}</>
      }
   }}
 >
    {props.children}
 </MDXProvider>

Versions:
"@mdx-js/mdx": "^1.5.5",
"@mdx-js/react": "^1.5.5",

Using gatsby

[johno]

Hey @agneym, thank you very much for the minimal reproduction!

This is something that doesn't seem to be documented, which is definitely a docs bug, but the wrapper is overridden by the layout when one is passed. So, in your repro, the layout from gatsby-plugin-mdx is being applied.

What you can do is create a layout based on your wrapper logic and use that in place of the wrapper.

[agneym]

@johno Got it, That makes sense. I can confirm that this is not happening when I'm programmatically creating pages. Then, even if I'm using a default layout, wrapper on MDXProvider is used.

You can find that on programmatic branch on the same repo.

Wouldn't it be confusing that both these behaviors exist at the same time?

[wooorm]

Hi @agneym, @kyunghoon, thanks for your patience!

Wouldn't it be confusing that both these behaviors exist at the same time?

This indeed seems confusing, and should be documented, as John points out. Is this something any of you could try and do in a PR to the docs?

[wooorm]

A lot has changed since this issue. In particular, a new RC for version 2 to landed.
One thing that that RC landed, is that local components are more important than given ones. If a file defines that it uses A, and it’s passed B, then A is used in the end.
This is now documented in Using MDX on our (beta) website: https://v2.mdxjs.com/docs/using-mdx/. Please try it out and provide feedback!