How to run compiled MDX without calling the Function constructor?

[CapitaineToinon]

Hello there!

I've been trying to use mdx with nextjs hosted on the edge. Unfortunately, it happens that on the edge, eval and new Function aren't supported: https://nextjs.org/docs/app/api-reference/edge#unsupported-apis

But running evaluate with calls run will call new Function:
https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/run.js

Is there an otherway to get mdx in react without those apis?

[wooorm]

Yes, compile, write to file, import file.
If that works.

MDX generates JavaScript. Something needs to run that JavaScript.

[CapitaineToinon]

Unfortunately I don't have access to the file system or node apis since my app is being rendered on the edge. Also the render happens every time the user visits the page and the markdown string comes from a database so I'd like to avoid file access.

I guess I'm a bit confused because without using MDX, I managed to get a working pipeline of unified + remark + rehype + rehype react to work just fine. However this isn't MDX so I can't get stuff like a custom YouTube component to work this. I see that under the hood, MDX is also using a unified pipeline so I thought maybe I could use that directly instead.

Maybe I'm confusing everything but I thought it would be possible to go from VFile to a JSX tree without passing through en eval'd string in between.

[ChristianMurphy]

I managed to get a working pipeline of unified + remark + rehype + rehype react to work just fine.

rehype produces HTML, which doesn't run, and is purely rendered in browser.

MDX produces JavaScript, it can be run either on the browser or the server, when it is run it produces HTML.
If you want to run it on the server, you need a way to dynamically run JavaScript, like: eval, new Function, or a dynamic import.

[wooorm]

JSX tree

You can send the string of JS down the wire.
And use the eval part on the client.
See https://mdxjs.com/guides/mdx-on-demand/

[CapitaineToinon]

Rendering purely on the client would be pretty bad for SEO unfortunately. I looked a bit at how hashicorp/next-mdx-remote and they also eventually call the Function constructor, through Reflect: https://github.com/hashicorp/next-mdx-remote/blob/main/src/rsc.tsx#L64

So I guess this is just a hard limitation of edge environement I can't get around and concerns Vercel, not mdx.

rehype produces HTML, which doesn't run, and is purely rendered in browser.

Yeah it makes sense, I also looked a bit at how rehype react works.

Thank you very much for the very fast answers! 👍