Skip to content
MDX logo
v1.5.5GitHub 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
Previous:
Create React App
Next:
Webpack