Skip to content
MDX logo
v1.6.6GitHub logoTwitter logo
GitHub logoTwitter logo

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 => { => {
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
Edit this page on GitHub
Create React App