Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@mdx-js/loader
Advanced tools
@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.
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;
```
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 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 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.
@mdx-js/loader
webpack loader for MDX.
This package is a webpack loader to support MDX.
This integration is useful if you’re using webpack (or another tool that uses webpack, such as Next.js).
This integration can be combined with the Babel loader to support nonstandard JSX runtimes (such as Vue) or 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.
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/loader@next
yarn:
yarn add @mdx-js/loader@next
Add something along these lines to your webpack.config.js
:
module.exports = {
module: {
// …
rules: [
// …
{
test: /\.mdx?$/,
use: [{loader: '@mdx-js/loader', options: {}}]
}
]
}
}
See also ¶ Create React App (CRA), ¶ Next.js, and ¶ Vue CLI, if you’re using webpack through them, for more info.
This package exports a webpack plugin as the default export.
Source maps are supported based on how you configure webpack.
You do not need to pass options.SourceMapGenerator
.
options
options
are the same as compile
from @mdx-js/mdx
.
If you use modern JavaScript features you might want to use Babel through
babel-loader
to compile to code that works:
// …
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', options: {}}
]
// …
webpack-cli
webpack-cli
doesn’t support loaders in ESM directly or even indirectly.
Because @mdx-js/mdx
itself is ESM, this means the @mdx-js/loader
loader
(even though it’s CJS) doesn’t work with webpack-cli
(it does work when using
the webpack API).
To use this loader with webpack-cli
, set the DISABLE_V8_COMPILE_CACHE=1
environment variable.
See this issue for details.
DISABLE_V8_COMPILE_CACHE=1 webpack
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.
FAQs
Webpack loader for MDX
We found that @mdx-js/loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.