@mdx-js/loader

What is @mdx-js/loader?

@mdx-js/loader is a webpack loader for MDX, which allows you to import and use .mdx files as React components. MDX is a format that lets you seamlessly write JSX in your Markdown documents. This package is particularly useful for integrating MDX into your React projects, enabling you to leverage the power of React components within your Markdown content.

What are @mdx-js/loader's main functionalities?

Importing MDX files as React components

This feature allows you to import MDX files as React components, enabling you to use JSX syntax within your Markdown files. The code sample demonstrates how to configure webpack to use @mdx-js/loader and how to use an MDX file within a React component.

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          'babel-loader',
          '@mdx-js/loader'
        ]
      }
    ]
  }
};

// example.mdx
export const MyComponent = () => <div>Hello, MDX!</div>;

# Hello, world!

<MyComponent />

// App.js
import React from 'react';
import MDXContent from './example.mdx';

const App = () => (
  <div>
    <MDXContent />
  </div>
);

export default App;
```

Customizing MDX components

This feature allows you to customize MDX components by importing and using your own React components within MDX files. The code sample shows how to import a custom React component into an MDX file and use it within the Markdown content.

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          'babel-loader',
          '@mdx-js/loader'
        ]
      }
    ]
  }
};

// example.mdx
import { MyCustomComponent } from './MyCustomComponent';

# Hello, world!

<MyCustomComponent />

// MyCustomComponent.js
import React from 'react';

export const MyCustomComponent = () => <div>Custom Component Content</div>;

// App.js
import React from 'react';
import MDXContent from './example.mdx';

const App = () => (
  <div>
    <MDXContent />
  </div>
);

export default App;
```

Other packages similar to @mdx-js/loader

gatsby-plugin-mdx

gatsby-plugin-mdx is a Gatsby plugin that provides support for MDX, allowing you to use JSX in Markdown files within a Gatsby site. It offers similar functionality to @mdx-js/loader but is specifically designed for Gatsby projects, providing additional features like automatic page creation and GraphQL integration.

next-mdx-remote

next-mdx-remote is a Next.js plugin that enables you to use MDX with Next.js. It allows you to load MDX content remotely and render it as React components. This package is similar to @mdx-js/loader but is tailored for Next.js applications, offering features like server-side rendering and static site generation.

mdx-bundler

mdx-bundler is a tool that uses esbuild to bundle MDX files into JavaScript. It provides a fast and efficient way to compile MDX content, similar to @mdx-js/loader, but focuses on performance and ease of use with esbuild. It can be used in various JavaScript environments, not just webpack.

README

@mdx-js/loader

webpack loader for MDX.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • mdx
  • Options
• Examples
  • Combine with Babel
• Types
• Compatibility
• Security
• Contribute
• License

What is this?

This package is a webpack loader to support MDX.

When should I use this?

This integration is useful if you’re using webpack (or another tool that uses webpack, such as Next.js or Rspack).

This integration can be combined with the Babel loader to compile modern JavaScript features to ones your users support.

If you want to evaluate MDX code then the lower-level compiler (@mdx-js/mdx) can be used manually.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install @mdx-js/loader

Use

Add something along these lines to your webpack.config.js:

/**
 * @import {Options} from '@mdx-js/loader'
 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {/* jsxImportSource: …, otherOptions… */}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

See also ¶ Next.js and ¶ Vue CLI, if you’re using webpack through them, for more info.

API

This package exports no identifiers. The default export is mdx.

mdx

This package exports a webpack plugin as the default export. Configuration (see Options) are passed separately through webpack.

Options

Configuration (TypeScript type).

Options are the same as CompileOptions from @mdx-js/mdx with the exception that the SourceMapGenerator and development options are supported based on how you configure webpack. You cannot pass them manually.

Examples

Combine with Babel

If you use modern JavaScript features you might want to use Babel through babel-loader to compile to code that works in older browsers:

/**
 * @import {Options} from '@mdx-js/loader'
 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // Note that Webpack runs right-to-left: `@mdx-js/loader` is used first, then
          // `babel-loader`.
          {loader: 'babel-loader', options: {}},
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

Types

This package is fully typed with TypeScript. It exports the additional type Options. See § Types on our website for information.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, @mdx-js/loader@^3, compatible with Node.js 16.

Security

See § Security on our website for information.

Contribute

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.

License

MIT © Compositor and Vercel