Compiling MDX at runtime

[leo-petrucci]

I'm currently working with netlify-cms. My aim is to be able to preview MDX components embedded in my pages directly within Netlify CMS.

Thankfully, netlify CMS allows me to use a custom render function, so all I need to do is to convert my MDX to JSX at runtime within this function. I've managed to get this to work with mdx-scoped-runtime, but I'm getting random errors so I was hoping there was a way to do this with mdx-js?

I found there used to be an old package called @mdx-js/runtime from this thread, but when I installed it and tried using it I started getting the error:

error - ./node_modules/@babel/core/lib/transformation/normalize-file.js:9:0
Module not found: Can't resolve 'fs'

Any tips on how I can solve this issue? Any workarounds to compiling MDX at runtime?

EDIT: Figured out the original issue was a problem with Webpack config, but now when I write components in my Markdown I get:

Unhandled Runtime Error
SyntaxError: unknown: Unexpected token (9:0)

   7 | <p>{`Testing `}</p>
   8 | <Bye // The component I was writing
>  9 | <p>
     | ^

I assume this is because it parses the JSX as I'm writing it and throws an error since it's not been closed properly?

[ChristianMurphy]

In MDX 2 runtime has been replaced with evaulate, you can see some examples of MDX 2 usage here: #1861

I assume this is because it parses the JSX as I'm writing it and throws an error since it's not been closed properly?

Yes, when handling JSX tags, MDX needs to JSX to be valid to render.

I'm assuming this error is coming from an authoring system, if so a way to contain this client side is to use an error boundary https://reactjs.org/docs/error-boundaries.html
To catch the error, and warn the author the syntax is invalid until the tag is closed, when the author has fixed the syntax error, it can preview again.

[leo-petrucci]

This looks like what I need! It works great, no errors and much better performance than before 😊

Any idea how to get around this error? My dependencies and types are up to date, but Typescript keeps complaining.

Property 'Fragment' does not exist on type 'typeof import("/home/leonardo/ironeko/node_modules/@types/react/jsx-runtime")'.ts(2339)

Code compiles fine if I @ts-ignore it so no biggie if it can't be fixed.

Thank you!

[ChristianMurphy]

The issue is that react/jsx-runtime doesn't currently export it's types DefinitelyTyped/DefinitelyTyped#52321