Resolve mdx plugins string format

packages/next-mdx/index.js

@@ -2,23 +2,24 @@ module.exports =
   (pluginOptions = {}) =>
   (nextConfig = {}) => {
     const extension = pluginOptions.extension || /\.mdx$/
+    const userProvidedMdxOptions = pluginOptions.options
 
     const mdxRsOptions = nextConfig?.experimental?.mdxRs
     const loader = mdxRsOptions
       ? {
           loader: require.resolve('./mdx-rs-loader'),
           options: {
             providerImportSource: 'next-mdx-import-source-file',
-            ...pluginOptions.options,
+            ...userProvidedMdxOptions,
             // mdxRsOptions is a union of boolean and object type of MdxTransformOptions
             ...(mdxRsOptions === true ? {} : mdxRsOptions),
           },
         }
       : {
-          loader: require.resolve('@mdx-js/loader'),
+          loader: require.resolve('./mdx-js-loader'),
           options: {
             providerImportSource: 'next-mdx-import-source-file',
-            ...pluginOptions.options,
+            ...userProvidedMdxOptions,
           },
         }
 

packages/next-mdx/mdx-js-loader.js

@@ -0,0 +1,66 @@
+const mdxLoader = require('@mdx-js/loader')
+
+function interopDefault(mod) {
+  return mod.default || mod
+}
+
+async function importPlugin(plugin, projectRoot) {
+  if (Array.isArray(plugin) && typeof plugin[0] === 'string') {
+    plugin[0] = interopDefault(
+      await import(require.resolve(plugin[0], { paths: [projectRoot] }))
+    )
+  }
+  return plugin
+}
+
+async function getOptions(options, projectRoot) {
+  const {
+    recmaPlugins = [],
+    rehypePlugins = [],
+    remarkPlugins = [],
+    ...rest
+  } = options
+
+  const [updatedRecma, updatedRehype, updatedRemark] = await Promise.all([
+    Promise.all(
+      recmaPlugins.map((plugin) => importPlugin(plugin, projectRoot))
+    ),
+    Promise.all(
+      rehypePlugins.map((plugin) => importPlugin(plugin, projectRoot))
+    ),
+    Promise.all(
+      remarkPlugins.map((plugin) => importPlugin(plugin, projectRoot))
+    ),
+  ])
+
+  return {
+    ...rest,
+    recmaPlugins: updatedRecma,
+    rehypePlugins: updatedRehype,
+    remarkPlugins: updatedRemark,
+  }
+}
+
+module.exports = function nextMdxLoader(...args) {
+  const options = this.getOptions()
+  const callback = this.async().bind(this)
+  const loaderContext = this
+
+  getOptions(options, this.context).then((userProvidedMdxOptions) => {
+    const proxy = new Proxy(loaderContext, {
+      get(target, prop, receiver) {
+        if (prop === 'getOptions') {
+          return () => userProvidedMdxOptions
+        }
+
+        if (prop === 'async') {
+          return () => callback
+        }
+
+        return Reflect.get(target, prop, receiver)
+      },
+    })
+
+    mdxLoader.call(proxy, ...args)
+  })
+}

test/e2e/app-dir/mdx/app/rehype-plugin/page.mdx

@@ -0,0 +1,5 @@
+# Rehype plugin
+
+```math
+C_L
+```

test/e2e/app-dir/mdx/mdx.test.ts

@@ -8,6 +8,7 @@ for (const type of ['with-mdx-rs', 'without-mdx-rs']) {
         '@next/mdx': 'canary',
         '@mdx-js/loader': '^2.2.1',
         '@mdx-js/react': '^2.2.1',
+        'rehype-katex': '7.0.1',
       },
       env: {
         WITH_MDX_RS: type === 'with-mdx-rs' ? 'true' : 'false',
@@ -59,6 +60,14 @@ for (const type of ['with-mdx-rs', 'without-mdx-rs']) {
           '/_next/image?url=%2Ftest.jpg&w=384&q=75'
         )
       })
+
+      if (type === 'without-mdx-rs') {
+        it('should run plugins', async () => {
+          const html = await next.render('/rehype-plugin')
+          expect(html.includes('<mi>C</mi>')).toBe(true)
+          expect(html.includes('<mi>L</mi>')).toBe(true)
+        })
+      }
     })
 
     describe('pages directory', () => {

test/e2e/app-dir/mdx/next.config.js → test/e2e/app-dir/mdx/next.config.mjs

@@ -1,5 +1,10 @@
-const withMDX = require('@next/mdx')({
+import nextMDX from '@next/mdx'
+const withMDX = nextMDX({
   extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [['rehype-katex', { strict: true, throwOnError: true }]],
+  },
 })
 
 /**
@@ -12,4 +17,4 @@ const nextConfig = {
   },
 }
 
-module.exports = withMDX(nextConfig)
+export default withMDX(nextConfig)