Skip to content
MDX logo
v1.5.7GitHub 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 => {
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