Create React App

Please note there’s a known bug with the macro so live reloading doesn’t currently work.

With Create React App you will need to use mdx.macro.

npx create-react-app my-app
yarn add mdx.macro

Then create the following src/App.js:

// src/App.js

import React, { lazy, Component, Suspense } from 'react';
import { importMDX } from 'mdx.macro';

const Content = lazy(() => importMDX('./Content.mdx'));

class App extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <Content />
        </Suspense>
      </div>
    );
  }
}

export default App;

And then create the following src/Content.mdx:

# Hello, world!

See the full example