MDX with Gatsby Integration returning passed function alone

[jideabdqudus]

Hello,

This is my first question 🙏🏽

I'm trying to integrate MDX with my gatsby blog, I've gotten to the stage where I get to render my blog content in MDX.

I'm making use of GraphQL as my API Layer, so it returns the body of the mdx file in a string of this format

body: "\n```javascript\nimport moment from 'moment';\n\nexport const formatDate = (value, includeYear = true) => {\n /* Takes the date and returns it in this format 'Mar 21' */\n return includeYear ? moment(value).format('MMM Do, YYYY') : moment(value).format('MMM Do');\n};\n```\n\n```javascript\n/* Takes the date and returns it in this format '2022-04-27' */\nvar date = new Date();\ndate.toISOString().substring(0, 10);\n```\n"

I compile this result by import {compile} from @mdx-js/mdx then setting it into my state value, then render this value into my component.

My issue is that the result of the render just happens to be a string containing the compiled functions, I'm unable to render the actual MDX to the screen

const [value, setValue] = React.useState<any>('');

 React.useEffect(() => {
  async function compileMDX() {
   try {
    const exampleMDX = await data.mdx.body;
    const children = await compile(exampleMDX);
    setValue(children.value);
   } catch (err) {
    console.log(err);
   }
  }
  compileMDX();
  //eslint-disable-next-line
 }, []);

<Box className='markdown-body prism'>
      <MDXProvider components={MDXComponents}>
       <Fragment>{value}</Fragment>
      </MDXProvider>
 </Box>

Actual Result

Expected Result

[ChristianMurphy]

Welcome @jideabdqudus!
Sorry you ran into a spot of trouble.
It sounds like you want MDX to be dynamically rendered client side? And that you are using @mdx-js/mdx to do so?

If so, evaluate is the function from @mdx-js/mdx you are looking for https://mdxjs.com/packages/mdx/#evaluatefile-options.
compile generates just the JavaScript source code that a browser or server could then choose to run, but isn't run or rendered into a react component yet.

[jideabdqudus]

Thanks, @ChristianMurphy - I just tried making use of the evaluate function, it returns the content of the mdx file but without the appropriate components as defined in my MDXProvider.

<MDXProvider components={MDXComponents}>
       <Content />
</MDXProvider>

As you'd see in this screenshot, the code blocks aren't styled neither are the fonts - compared to the screenshot I shared earlier.

[wooorm]

a) You don’t need a provider. You get a component back from evaluate. That accepts components as a prop. See Using MDX
b) If you do want to use a provider, you have to pass it. See the docs on evaluate

[jideabdqudus]

Works now thanks @wooorm