Package Exports

@mdx-js/loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mdx-js/loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@mdx-js/loader`

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.

@mdx-js/loader