`@mdx-js/loader`

Webpack loader for MDX.

Installation

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

Current Tags

2.0.0-ci.53 ... ci (4 years ago)
2.1.2 ... latest (3 years ago)
2.0.0-rc.2 ... next (4 years ago)

16 Versions

2.1.2 ... 3 years ago
2.0.0 ... 4 years ago
2.0.0-rc.2 ... 4 years ago
2.0.0-next.9 ... 4 years ago
2.0.0-ci.53 ... 4 years ago
1.6.22 ... 5 years ago
2.0.0-next.7 ... 5 years ago
1.6.16-ci.0 ... 5 years ago
1.6.16 ... 5 years ago
0.16.8 ... 7 years ago
0.9.0 ... 7 years ago
0.15.7 ... 7 years ago
2.0.0-next.1 ... 5 years ago
1.6.2-ci.1 ... 5 years ago
1.6.5 ... 5 years ago
1.0.20 ... 6 years ago