MDX v0.20.3

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

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

export default () => ({
webpack: config => { => {
if (
typeof rule.test !== 'undefined' ||
typeof rule.oneOf === 'undefined'
) {
return rule
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