How can I render dynamic mdx content?

[BlackWind001]

Currently, the way I see how MDX content is renderered in React is by importing the MDX file and using the mdx-loader to return a component that can be used to render this document. So, it is somewhat like this:

// example.mdx
# Hello World

import ExampleFile from './example.mdx';

function RenderMDX (props) {
  return (<ExampleFile />);
}

Say however, that I have the following piece of code:

let text = `
# Hello World
`;

or anything at all. Now how would I render this MDX text in the above RenderMDX function?

[ChristianMurphy]

https://mdxjs.com/advanced/runtime

[ProfAndreaPollini]

@ChristianMurphy I'm trying to do the same (I'm creating a editor for my website with live preview and I want to see the preview of my mdx content as I type. I'm using next.js and when I use in my components the MDX tag I receive the following error:

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

I suppose that this code must run server side, but server side I can't use react. BTW I have already setup a preview endpoint which transform my code with babel and with mdx.sync. I obtain a module but I can't figure out how to use it in my frontend code.

/* @jsxRuntime classic */
/* @jsx mdx */



const layoutProps = {

};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <h1>{`test`}</h1>
    </MDXLayout>;
}

;
MDXContent.isMDXComponent = true;

[ChristianMurphy]

I suppose that this code must run server side, but server side I can't use react.

It works fine client side

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

see #1353 and https://github.com/vercel/next.js/discussions?discussions_q=resolve+fs+is%3Aanswered

I have already setup a preview endpoint which transform my code with babel and with mdx.sync. I obtain a module but I can't figure out how to use it in my frontend code.

You've mentioned before you want it to run client side, again that is possible with MDX runtime.

You could also generate the JS server side and dynamically load it client side.
Understand MDX compiles MDX to JS with React or Vue.
If you go into creating a custom dynamic JS loader, which is what you are describing here, you can do that, but it is outside the scope of what MDX intents to solve, and into the territory of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports.