Help inserting MDX into JSX

[warrenalphonso]

I'm trying to insert content from .mdx files into a .jsx file, and I can't figure out how to do this. I'm using Next.js, and auto-generated .mdx files work great. Do I have to use mdx.macro like in the CRA setup? Sorry, it's a really basic question but I haven't gotten anywhere for a few hours.

[ChristianMurphy]

Have you tried the MDX+Next guide? https://mdxjs.com/getting-started/next
And/or taken a look at the Next example https://github.com/mdx-js/mdx/tree/master/examples/next
Those should point you in the right direction.

If the issue is persistent even after trying those, could you share a https://codesandbox.io with an example of what you tried?

[warrenalphonso]

Thanks for the quick reply! Here's a git repo with what I'm trying to do (see pages/problem.js). I can reproduce it on a codesandbox if you'd like, I just don't have much experience on codesandbox so went with Git since it'd be faster for me.

You can run with yarn dev, but here's a screenshot of what I've got:

Behavior like what React-Markdown provides is what I'm looking for; it's relatively painless to do <ReactMarkdown escapeHtml={false} source={file}/>. I'm able to generate the JSX using mdx.sync() but now how do I insert that into the file?

[ChristianMurphy]

The utility you are using in your example

const mdx = require('@mdx-js/mdx')

is a lower level utility.
converts MDX into a JSX document, it is used to create tools like the webpack loader and next loader.

[warrenalphonso]

could you expand on why you want to use Next without using the MDX Next loader?

No idea, I didn’t know I wasnt using it. Can you explain or point me to some docs explaining what the MDX Next loader does? I might be mistaken but I don’t think the articles you linked earlier had anything about this. All I could find was this but I don’t understand how to use it after configuring.

Happy to try it if it’s better than MDX-runtime.

[ChristianMurphy]

It treats mdx documents as next js pages, for example https://github.com/mdx-js/mdx/tree/master/examples/next

[ChristianMurphy]

There's the webpack loader https://mdxjs.com/getting-started/webpack which focuses on a general import Component from 'document.mdx'
And there's runtime, which loads documents and processes them on the fly in the browser https://mdxjs.com/advanced/runtime

All three have their uses.
It really depends on what you want to do

[warrenalphonso]

Oh! I just found out Nextjs has a dynamic import feature, which works perfectly here since MDX supports imports like you pointed out. Thanks!