MDXProvider isn't taken into account

[openscript]

Dear mdx-js community

I'm rendering .mdx files successfully with:

import { RunOptions, runSync } from "@mdx-js/mdx";
import { MDXProvider } from "@mdx-js/react";
import { Title } from "@timelet/ui";
import * as jsxRuntime from "react/jsx-runtime";

type PageProps = {
  markdown: string;
};

export function Page({ markdown }: PageProps) {
  const Content = runSync(markdown, { ...(jsxRuntime as RunOptions) }).default;

  return (
    <section>
      <MDXProvider components={{ h1: Title }}>
        <Content />
      </MDXProvider>
    </section>
  );
}

How to make <Content /> use the MDXProvider context? If I pass it manually it works well:

export function Page({ markdown }: PageProps) {
  const Content = runSync(markdown, { ...(jsxRuntime as RunOptions) }).default;

  return (
    <section>
      <Content components={{ h1: Title }} />
    </section>
  );
}

Any hints are highly appreciated :)

[wooorm]

You need to compile the MDX so that it knows about your provider.
There's an option for that.
But, you probably don't need providers, see their readme's warning signs. You can pass components fine without them!

[openscript]

Thank you @wooorm! I leave some code snippets here, if others stumble on this discussion.

Compiling with _provideComponents:

const markdown = await compile(page.default, { ...mdxOptions, outputFormat: "function-body", providerImportSource: "@mdx-js/react" });

Then run it with:

const Content = runSync(markdown, { ...(jsxRuntime as RunOptions), useMDXComponents: useMDXComponents }).default;

This works, but using the hook by yourself seems to be cleaner:

export function Page({ markdown }: PageProps) {
  const Content = runSync(markdown, { ...(jsxRuntime as RunOptions) }).default;
  const components = useMDXComponents();

  return (
    <section>
      <Content components={components} />
    </section>
  );
}