@rsbuild/plugin-mdx

An Rsbuild plugin to provide support for MDX.

MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.

Usage

Install:

1npm add @rsbuild/plugin-mdx -D

Add plugin to your rsbuild.config.ts:

1// rsbuild.config.ts
2import { pluginMdx } from "@rsbuild/plugin-mdx";
3
4export default {
5  plugins: [pluginMdx()],
6};

After registering the plugin, you can import .mdx or .md files as components in your code.

Options

If you need to customize the compilation behavior of MDX, you can use the following configs.

mdxLoaderOptions

Options passed to @mdx-js/loader, please refer to @mdx-js/loader documentation for detailed usage.

• Type: MdxLoaderOptions
• Default: {}
• Example:

1pluginMdx({
2  mdxLoaderOptions: {
3    // Use Vue JSX
4    jsxImportSource: "vue",
5  },
6});

extensions

Specify the file extensions to be compiled with MDX loader, including .md files and .mdx files by default.

• Type: string[]
• Default: ['.mdx', '.md']

For example, to only compile .mdx files, you can set it as:

1pluginMdx({
2  extensions: [".mdx"],
3});

Type Declarations

In a TypeScript project, you need to add type definitions for *.mdx files so that TypeScript can recognize them correctly.

Create env.d.ts in the src directory and add the following content:

1declare module "*.md" {
2  let MDXComponent: () => JSX.Element;
3  export default MDXComponent;
4}
5declare module "*.mdx" {
6  let MDXComponent: () => JSX.Element;
7  export default MDXComponent;
8}

License

MIT.