@mdx-js/loader
Advanced tools
Package description
@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.
Readme
@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 imported instead of required.
npm:
npm install @mdx-js/loader
yarn:
yarn add @mdx-js/loader
Add something along these lines to your webpack.config.js:
module.exports = {
module: {
// …
rules: [
// …
{
test: /\.mdx?$/,
use: [
{
loader: '@mdx-js/loader',
/** @type {import('@mdx-js/loader').Options} */
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.
optionsoptions 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',
/** @type {import('@mdx-js/loader').Options} */
options: {},
},
];
// …
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
The npm package @mdx-js/loader receives a total of 601,169 weekly downloads. As such, @mdx-js/loader popularity was classified as popular.
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.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.