Is any way to convert .mdx to .html without nextjs?

[zfben]

I found most of mdx packages are convert .mdx to js code, how should I convert it to static HTML for SEO? (And if I don't use Next.js)

Thank you.

[wooorm]

There are many ways. Which way works for you, depends on what you do use.

[wooorm]

Please properly read the “Quick start” section. In particular, see the list following “You can also use MDX if you’re not using a bundler:” Then, see the following subsection too: “JSX”.

To summarize: you can import MDX in Node or use evaluate from mdx-js/mdx. You have to choose a JSX runtime though. React, Preact, Svelte, Vue, etcetera.

[zfben]

My problem is mdx-js/mdx generate javascript code, not html code. I want to generate HTML code for better SEO.

[wooorm]

No it doesn’t. importing in Node and evaluate do not return code. They compile and evaluate code. they return components. You can render those components to get HTML.

[zfben]

@wooorm Thanks a lot. Finally, I know how to generate HTML.

import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'
import { renderToString } from 'react-dom/server'
import * as runtime from 'react/jsx-runtime.js'
import { evaluateSync } from '@mdx-js/mdx'
import { createElement } from 'react'

export function generate (body: string) {
  const mdx = evaluateSync(body, {
    ...runtime as any,
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight]
  }).default

  return renderToString(createElement(mdx))
}

[ManasMakde]

I tried @zfben 's code but it gave me the following error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './jsx-runtime.js' is not defined by "exports"

To fix it change it to import * as runtime from 'react/jsx-runtime'