How to evaluate the output of an esbuild build?

[behrangsa]

I have created this example from the docs.

When I build the project, I get a JS file that looks like this:

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Readme from "https://raw.githubusercontent.com/mdx-js/mdx/main/readme.md";
function MDXContent(props = {}) {
  const { wrapper: MDXLayout } = props.components || {};
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p"
    }, props.components);
    return _jsxs(_Fragment, {
      children: [_jsx(_components.p, {
        children: "Here\u2019s the readme:"
      }), "\n", _jsx(Readme, {})]
    });
  }
}
var invoice_mdx_default = MDXContent;
export {
  invoice_mdx_default as default
};

To quote the docs (emphasis mine):

Running that (node build.js) and evaluating output.js (depends on how you evaluate React stuff) would give:

<p>Here’s the readme:</p>
<h1>MDX: Markdown for the component era 🚀</h1>
{/* … */}
<p><a href="https://github.com/mdx-js/mdx/blob/main/license">MIT</a> © …</p>

How can I evaluate output.js to get the final HTML file?

Thanks.

[ChristianMurphy]

The output is a react component.

You can render it server side with renderToString (https://reactjs.org/docs/react-dom-server.html#rendertostring) or your preferred server side framework.
Or import it and use it as you would any other component client side.

[behrangsa]

Is there an end-to-end example to write a simple article/blog-post in MDX and view it in the browser?

[ChristianMurphy]

Is there an end-to-end example to write a simple article/blog-post in MDX and view it in the browser?

There are some sandbox examples in the issue templates which show simple end to end flows (https://github.com/mdx-js/.github/tree/main/sandbox-templates)

• MDX Loader with Next.js
• MDX Evaluate with Node.js
• MDX Evaluate with Create React App

We don't cover all possible combination of tool and framework (the number of combinations is astronomical, as would the maintenance cost of upkeep), but some common use-cases are covered, and the ideas extend to other tools and frameworks.