unified

Project: mdx-js/mdx

Package: @mdx-js/loader@1.6.22

  1. Dependencies: 0·Dependents: 150
  2. Loader for MDX
  1. remark 202
  2. markdown 142
  3. mdx 29
  4. react 17
  5. jsx 17
  6. styleguide 2
  7. webpack 2
  8. loader 2

@mdx-js/loader

Build Downloads Sponsors Backers Chat

Webpack loader for MDX.

Install

npm:

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

yarn:

yarn add --dev @mdx-js/loader

Use

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

You’ll probably want to configure Babel to use @babel/preset-react or so, but that’s not required.

All options given to mdx-js/loader, except for renderer (see below), are passed to MDX itself:

// …
{
  test: /\.mdx$/,
  use: [
    // …
    {
      loader: '@mdx-js/loader',
      options: {
        remarkPlugins: [require('remark-slug'), require('remark-toc')],
        rehypePlugins: [require('rehype-autolink-headings')]
      }
    }
  ]
}

The renderer option specifies a string that is added at the start of the generated source, so you can use a different createElement implementation. By default, that value is:

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

Here a fictional alternative createElement is used:

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

const mdx = (name, props, ...children) => {
  if (name === 'wrapper') return children.map(createElement)
  if (name === 'inlineCode') return h('code', props, ...children)

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

// …
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 Contributing on mdxjs.com for ways to get started. See Support for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Compositor and Vercel