@mdx-js/loader

Webpack loader for MDX.

Installation

npm:

npm i -D @mdx-js/loader

Usage

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

The renderer option specifies a string that will be prepended to the generated source allowing for the use of any createElement implementation. By default, that string is:

import React from 'react'
import {mdx} from '@mdx-js/react'

Using the renderer option, one can swap out React for another implementation. The example below wraps a generic JSX compatible function named h.

const renderer = `
import { h } from 'generic-implementation'

const mdx = (function (createElement) {
  return function (name, props, ...children) {
    if (typeof name === 'string') {
      if (name === 'wrapper') return children.map(createElement)
      if (name === 'inlineCode') return createElement('code', props, ...children)
    }

    return createElement(name, props, ...children)
  }
}(h))
`

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

For more information on why this is required, see this post.

Contribute

See the Support and Contributing guidelines on the MDX website for ways to (get) help.

This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Compositor and Vercel