webpack and Rspack
ironmark/webpack is a loader. It outputs JSX, so chain a JSX loader after it. Loaders run right to left, so the JSX loader comes first in the list:
// webpack.config.js
export default {
module: {
rules: [
{
test: /\.mdx?$/,
use: [
{ loader: "babel-loader", options: { presets: ["@babel/preset-react"] } },
{ loader: "ironmark/webpack", options: { providerImportSource: "@mdx-js/react" } },
],
},
],
},
};The loader's options are the plugin options. One compiler is created per rule and reused across files.
Rspack
In Rspack, use builtin:swc-loader instead of babel-loader:
// rspack.config.js
export default {
module: {
rules: [
{
test: /\.mdx?$/,
use: [
{
loader: "builtin:swc-loader",
options: { jsc: { parser: { syntax: "ecmascript", jsx: true } } },
},
{ loader: "ironmark/webpack" },
],
},
],
},
};