how to render parsed mdx to react

let’s say I have const Content = mdx.sync(‘# Hello’);

Now how can I render the content into react?

I tried with render content as a component <Content /> but got:

An internal error occured!

Error: Failed to execute 'createElement' on 'Document': The tag name provided ('/* @jsx mdx */


const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};

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

;
MDXContent.isMDXComponent = true;') is not a valid name.
    at createElement (http://localhost:3000/main.js:29915:38)
    at createInstance (http://localhost:3000/main.js:31111:24)
    at completeWork (http://localhost:3000/main.js:39602:32)
    at completeUnitOfWork (http://localhost:3000/main.js:42073:30)
    at performUnitOfWork (http://localhost:3000/main.js:42280:16)
    at workLoop (http://localhost:3000/main.js:42291:28)
    at renderRoot (http://localhost:3000/main.js:42371:11)
    at performWorkOnRoot (http://localhost:3000/main.js:43328:11)
    at performWork (http://localhost:3000/main.js:43238:11)
    at performSyncWork (http://localhost:3000/main.js:43212:7)
          

[peter-mouland]

hey, sorry for commenting on an old issue, but i’m trying the same sort of thing. I’ve got a CMS with a textarea where we allow people to type MDX, which will be saved as is into the db, but, we’d like to show a preview as they type.

I have tried the runtime, but as that’s not safe for user-input, it crashes while the editor is typing.

import MDX from '@mdx-js/runtime';
...
const mdxState = `# hello` // <- works, but '<e' crashes the app
<MDX components={shortcodes}>{mdxState}</MDX>

I’m sure i got this technique working using the gatsby-plugin-mdx renderer… but I stashed the code and can’t get it working again 🤦‍♂️

I’m struggling to connect some dots here…

• @mdx-js/runtime can render the MDX string, but only if it’s without errors,
• @mdx-js/mdx can transform incomplete MDX strings, but only as far as JSX,
• gatsby-plugin-mdx takes a string, but only if the JSX is already transformed down to JS.

I feel like i’m missing something, but all the tutorials assume you’re working with mdx files at build time. While I’m trying to work with an input string at run-time.

Has anyone pieced this together?

— edit ---- I’ve added a ErrorBoundary to prevent the crashing, but it’s not the greatest UX!

class PreventInputError extends React.Component {
    static getDerivedStateFromError() {
        return { hasError: true };
    }
    state = { hasError: false };
    render() {
        return this.state.hasError ? this.props.source : this.props.children;
    }
}

const Preview = React.memo(({ children }) => (
        children ? (
            <PreventInputError key={children} source={children}>
                <MDX>{children}</MDX>
            </PreventInputError>
        ) : null
));

[wooorm]

MDX creates a string of JavaScript code that needs to be evaluated. You can use the runtime to do that, but it’s unsafe.