Skip to content
🎉Launching MDX V1 v0
MDX logoMDX v1.0.16
GitHub 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 => {
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
Next:
Getting Started