MDX


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

Then add the webpack field to your static.config.js:

export default {
  getSiteData: () => ({
    // ...
  }),
  getRoutes: async () => {
    // ...
  },
  webpack: config => {
    config.module.rules.map(rule => {
      // rules is an array of objects, we want the one with the `oneOf` field
      if (
        typeof rule.test !== 'undefined' ||
        typeof rule.oneOf === 'undefined'
      ) {
        return rule;
      }
      // add the mdx-js loader to it
      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