Skip to navigation

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