compile mdx to html with import of jsx files

[AngeloChecked]

project root:

. 
├── Box.jsx 
├── main.ts
└── test.mdx

main.ts

import fs from 'node:fs/promises'
import {compile, run} from 'https://esm.sh/@mdx-js/mdx@2'
import {renderToStaticMarkup} from 'npm:react-dom/server'
import * as runtime from 'npm:react/jsx-runtime'


const file = await fs.readFile('test.mdx');
const test = await compile(file,{ outputFormat: "function-body" })
const { default: MDXContent } = await run(test, {...runtime})
const html = renderToStaticMarkup(MDXContent({}))
console.log(html)

test.mdx

import {Box} from "./Box.jsx"

export function Thing() {
 return <>World!</>
}

# Hello, <Thing />

Box.jsx

export function Box() {
 return <>im a box!</>
}

when i run the main i receive this error:

error: Uncaught 1:1-1:29: Cannot use `import` or `export … from` in `evaluate` (outputting a function body) by default: please set `useDynamicImport: true` (and probably specify a `baseUrl`)

Do you have any guidance on how to enable importing of jsx in my MDX files?"

[wooorm]

The error you get gives the answer: pass useDynamicImport: true and baseUrl.
V3 was just released. useDynamicImport: true was removed and is now the default. But you must pass the baseUrl.

[wooorm]

That being said, MDX is a compiler, not a bundler.
If you are going to use MDX like this, you are going to get actual imports. And JavaScript does not support JSX. In a browser an HTTP request will be sent out. In Node, the file will run.

[AngeloChecked]

Thank you, Wooorm! I'm currently utilizing Deno to generate static HTML. I initially believed that the jsx-runtime could import files, but it appears I was mistaken. Do you have any recommendations for bypass the need for a bundler? Will plain JavaScript files suffice? I'm also a bit unclear on the concept of useDynamicImport: true.

[wooorm]

Update to v3 btw.
Plain JS files work.
Node supports loaders: so it can support importing MDX/JSX/etc files if you set it up. I’d assume Deno should have something like that.
useDynamicImport, which is the default, is needed because there is no way to eval an entire module in JavaScript. It can only eval function bodies. Only entire modules can use import statements, function bodies can use import() expressions. So we compile import statements to import expressions.
More on how it all works is explained in the docs. Or use the playground to inspect results.