how do I use the remarkGfm to make it render into my jsx?

[jiuyuer]

I converted the.mdX document to a jsx string with compile configuration remarkGfm on the front end. Then how do I configure it to render directly in the jsx file as a component?

env：vite+react

const modules = import.meta.glob('./about.mdx', { as: 'raw', eager: true });
console.log(modules['./about.mdx']);
console.log(  String(await compile(modules['./about.mdx'], { remarkPlugins: [remarkGfm] })));

I can manually create a.jsx file and paste it into it, but how to go through the code to practice?

thanks!

[ChristianMurphy]

Welcome @jiuyuer!

how do I use the remarkGfm to make it render into my jsx?

remark-gfm is a parser, it does not render anything.
MDX can though.

Then how do I configure it to render directly in the jsx file as a component?

It sounds like you are using Vite?
If so consider using the Vite integration https://mdxjs.com/docs/getting-started/#vite
Otherwise if you want to do fully custom and client side rendering use evaluate or evaluateSync https://mdxjs.com/packages/mdx/#evaluatefile-options

I can manually create a.jsx file and paste it into it, but how to go through the code to practice?

It's unclear what your desired use case and work flow is.
For the community to be able to offer suggestions, please elaborate on what you are trying to build with MDX.
A blog, a comment system, something else?

[jiuyuer]

Thank you very much
I solved this problem with evaluateSync
This is a snippet of my code

function Provider({ path, children }) {
  const EvaluateFun = evaluateSync(importLocale(path), {
    ...runtime,
    // format: 'mdx',
    remarkPlugins: [remarkGfm]
  });
  const MdTag = EvaluateFun.default;
  const componentsWithStyles = useThemedStylesWithMdx(
    useMDXComponents(components)
  );

  return (
    <ThemeUIProvider theme={theme}>
      <MdTag components={componentsWithStyles} />
      <MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
    </ThemeUIProvider>
  );
}
export default Provider;

The main reason is that I didn't read the official API carefully.
I need more time to use and understand.