babel.config.js

export default {
  presets: [
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
  ],
};

Demo.js

import React from "react";

function Demo() {
  return <h2>HOLY BUCKETS</h2>;
}

export default Demo;

MDXBuild.js

import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import { renderToStaticMarkup } from "react-dom/server";
import * as jsxRuntime from "react/jsx-runtime";
import { evaluateSync, compile } from "@mdx-js/mdx";
import { createElement } from "react";
import { useMDXComponents, MDXProvider } from "@mdx-js/react";

const mdxDoc = `
---
title: Example Post
published: 2021-02-13
description: This is some description
---
# Wahoo

Here's a **neat** demo:

<Demo />
`.trim();

console.log(await main(mdxDoc));

async function main(source) {
  // import needed JSX components
  // required babel presets and
  // node --experimental-loader @node-loader/babel
  const Demo = (await import("./Demo.js")).default;
  /**
   * evaluateSync will compile & run the mdx source and return
   * an MDXModule
   * interface MDXModule {
   * This could be any value that is exported from the MDX file.
   * [key: string]: unknown;
   * A functional JSX component which renders the content of the MDX file.
   * default: MDXContent;
   * }
   */
  const MDXSource = await evaluateSync(source, {
    ...jsxRuntime,
    useMDXComponents,
    useDynamicImport: true,
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight],
  }).default;

  return renderToStaticMarkup(
    createElement(
      MDXProvider,
      { components: { Demo } },
      createElement(MDXSource, null, null)
    )
  );
}

package.json

{
  "name": "mdxhtml",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "exec": "node --experimental-loader @node-loader/babel index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-react": "^7.18.6",
    "@mdx-js/mdx": "^2.2.1",
    "@mdx-js/node-loader": "^2.2.1",
    "@node-loader/babel": "^2.0.1",
    "esbuild": "^0.17.6",
    "mdx-bundler": "^9.2.1",
    "next-mdx-remote": "^4.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rehype-highlight": "^6.0.0",
    "remark-gfm": "^3.0.1"
  }
}