$ npm install @mdx-js/loader
@mdx-js/loader
Webpack loader for MDX.
npm:
npm i -D @mdx-js/loader
// ...
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.
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.
MIT © Compositor and Vercel
© 2010 - cnpmjs.org x YWFE | Home | YWFE