Using MDXProvider for evaluate, options.useMDXComponents about xdm

[shimamooo]

Thank you! Totally didn't cross my mind that evaluate returned a component - I was rendering it as a string in my JSX.

aside: I was today years old when I learned that you can use a function component as a value for useState. Although this is probably far from best practice, I'm just glad it all works 😆

Working code

evaluate

// /lib/xdm.js

import { evaluate } from 'xdm';
import * as runtime from 'react/jsx-runtime.js';
import MDXComponents from '@components/MDXComponents';

export const evaluateMDX = async (mdx, setMDXOutput) => {
  const { default: Content } = await evaluate(mdx, {
    ...runtime,
    useMDXComponents,
    useDynamicImport: true,
  });

  setMDXOutput(() => {
      const returnJSX = () => <Content components={MDXComponents} />;
      return returnJSX;
    });
  };

Implementation in client using <MDXProvider />

// /components/MDXContent.js

import { useState, useMemo } from 'react';
import { evaluateMDX } from '@lib/xdm';

export default function MDXContent({ mdx }) {
  const [MDXOutput, setMDXOutput] = useState(() => {
    const returnJSX = ({ children }) => <>{children}</>;
    return returnJSX;
  );

  useMemo(() => {
    evaluateMDX(mdx, setMDXOutput);
  }, [mdx]);

  return (
    <MDXOutput />
  );
}

[wooorm]

Which bundler are you using? I think maybe
useMdxComponents is undefined because it isn't a named export?

[wooorm]

Also: no need to use the provider at all here! You can pass the components to Content directly!