What's the right way to scoped in custom components when evaluate with @mdx-js/mdx? (2.0.0-rc1)

[xHomu]

Great work on MDX v2! I especially appreciate the updated new v2 docs!

I'm learning v2 by practicing against the Playground page code, but couldn't quite figure out how to scope in React components when evaluating.

Here's codesandbox of what I learned out so far

---

Based on the v2 Docs, I should able to pass the component props via the MXProvider and useuseMDXComponents:

        await evaluate(code, {
          ...runtime,
          useMDXComponents,
          useDynamicImport: true,
          remarkPlugins,
          rehypePlugins
        })
      ).default;

      <MDXProvider components={components}>
        {state.result && state.result()}
      </MDXProvider>

But that doesn't work.

I was able to style existing components by passing components directly into the evaluated result:

{state.result && state.result({ components })}

But any custom React components simply wouldn't show up from the evaluated code.

Am I missing something obvious here?

---

Edit: I think I figured it out the problem, it's the rehype-sanitize plugin that's preventing custom components from passing through evaluate. Now I have to figure out how to extend the schema.

[wooorm]

Great work on MDX v2! I especially appreciate the updated new v2 docs!

Thanks for the kind words, means a lot!

---

Evaluate gives you a component (as default):

const MDXContentComponent = await evaluate(code, {...}).default

You can then pass components to that component:

<MDXContentComponent components={...} />

But any custom React components simply wouldn't show up from the evaluated code.

Can you please explain with an example what you tried, what you expected, and what didn’t work?

Am I missing something obvious here?

I think so :) the default result from evaluate is exactly the same as what you’d get when importing an MDX file. So the whole § Using MDX section applies!

Edit

Why are you using sanitize? If it is to provide security for unsafe user generated MDX, that won’t work.
See https://v2.mdxjs.com/docs/getting-started/#security for more info.

[xHomu]

I'm using the rehype-sanitize plugin mostly as a shortcut to clean up a bunch of possible render errors, similar to the Playground issue #1772.

I will probably switch over to Chris' solution for Playground whenever he get around to it and drop the plugin.

[wooorm]

P.S. You could also raise a PR?