Webpack

MDX provides a built in webpack loader you need to install and configure for webpack projects.

Installation

npm install --save-dev @mdx-js/loader

Configuration

The loader needs to be used in tandem with the babel-loader. Most projects will typically already include this if you are using JSX syntax.

For webpack projects you can define the following webpack.config.js extension handler for .md and .mdx files:

module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /.mdx?$/,
        use: [
          'babel-loader',
          '@mdx-js/loader'
        ]
      }
    ]
  }
}

If you only want the loader for .mdx files you can change the regex to /.mdx$/.

The transpiled output for MDX requires babel to be run. This is typically by adding in the babel-loader to run after the MDX loader. Webpack starts from the end of the loaders array and works backward, so it is important to follow the ordering above.

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/proposal-object-rest-spread"
  ]
}

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-object-rest-spread