React Static

In order to use MDX with React Static you just need to configure the webpack option in static.config.js.

First, scaffold a new React Static site:

react-static create myapp
yarn add @mdx-js/loader@next

Then add the following to the webpack field to your node.api.js:

export default () => ({
  webpack: config => {
    config.module.rules.map(rule => {
      if (
        typeof rule.test !== 'undefined' ||
        typeof rule.oneOf === 'undefined'
      ) {
        return rule
      }

      rule.oneOf.unshift({
        test: /.mdx$/,
        use: ['babel-loader', '@mdx-js/loader']
      })

      return rule
    })

    return config
  }
})

Finally, add an .mdx file anywhere in the src directory. It “Just Works” when you import it.

# My first MDX Page

some awesome content

Edit this page on GitHub

Create React App

Webpack