Packages / @mdx-js/node-loader
@mdx-js/node-loader
Node loader for MDX.
💡 Experiment: this is an experimental package that might not work well and might change in minor releases.
This package is a Node ESM loader to support MDX. ESM loaders are an experimental feature in Node, slated to change. They let projects “hijack” imports to do all sorts of fancy things, in this case it let’s you import
MD(X) files.
This integration is useful if you’re using Node and want to import MDX files from the file system.
If you’re using a bundler (webpack, Rollup, esbuild), or a site builder (Gatsby, Next.js) or build system (Vite, WMR) which comes with a bundler, you’re better off using another integration: see § Integrations.
This package is ESM only: Node 12+ is needed to use it and it must be import
ed instead of require
d.
npm:
npm install @mdx-js/node-loader@next
yarn:
yarn add @mdx-js/node-loader@next
Say we have an MDX document, example.mdx
:
export const Thing = () => <>World!</>
# Hello, <Thing />
…and our module example.js
looks as follows:
import {renderToStaticMarkup} from 'react-dom/server.js'
import React from 'react'
import Content from './example.mdx'
console.log(renderToStaticMarkup(React.createElement(Content)))
…then running that with:
node --experimental-loader=@mdx-js/node-loader example.js
…yields:
<h1>Hello, World!</h1>
💡 Experiment: this is an experimental package that might not work well and might change in minor releases.
This package exports a Node ESM loader. It also exports the following identifier: createLoader
.
createLoader(options?)
Create a Node ESM loader to compile MDX to JS.
options
options
are the same as compile
from @mdx-js/mdx
.
my-loader.js
:
import {createLoader} from '@mdx-js/node-loader'
// Load is for Node 17+, the rest for 12-16.
const {load, getFormat, transformSource} = createLoader(/* Options… */)
export {load, getFormat, transformSource}
This example can then be used with node --experimental-loader=my-loader.js
.
Node itself does not yet support multiple loaders but it is possible to combine multiple loaders with @node-loader/core
.
This package is fully typed with TypeScript. See § Types on our website for information.
An Options
type is exported, which represents acceptable configuration.
See § Security on our website for information.
See § Contribute on our website 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.