Turbopack: Allow a custom list of file extensions to use with @next/mdx

This allows users to customize the file extensions to process with `@next/mdx`.

Before this change, `@next/mdx` with Turbopack did not consider the `extension` property at all. This was challenging since it doesn’t support all of the different ways of testing module specifiers that webpack does, such as with a regular expression.

This implements (and documents) a different behavior for Turbopack: accepting a list of extensions as `extension`. This is fairly backwards compatible, as it does not change how the plugin behaves with webpack, and it was ignored by Turbopack previously.

For example, to configure `next.config.js` with `@next/mdx` and support for both the `mdx` and `md` extension:

```js
import createMDX from '@next/mdx'

const withMDX = createMDX({
  extension: ['mdx', 'md'],
})

export default withMDX({})
```

This is equivalent to the following with Next.js and webpack:

```js
import createMDX from '@next/mdx'

const withMDX = createMDX({
  extension: /\.mdx?$/,
})

export default withMDX({})
```

Test Plan: Changed the existing mdx test to import an `md` component as well.

Author: wbinnssmith

docs/01-app/02-guides/mdx.mdx

@@ -51,13 +51,22 @@ const nextConfig = {
 }
 
 const withMDX = createMDX({
+  extension: process.env.TURBOPACK ? ['mdx', 'md'] : /\.mdx?$/,
   // Add markdown plugins here, as desired
 })
 
 // Merge MDX config with Next.js config
 export default withMDX(nextConfig)
 ```
 
+> **Good to know**:
+>
+> The `extension` option specifies the file extensions to be processed by the MDX loader.
+> For Next.js with webpack, this is a webpack rule test, such as a regular expression.
+> For Turbopack, this is either a single file extension string, or an array of file extensions.
+>
+> For compatibility reasons, webpack with Next.js does not understand the list format as extensions.
+
 This allows `.md` and `.mdx` files to act as pages, routes, or imports in your application.
 
 ## Add an `mdx-components.tsx` file

packages/next-mdx/index.js

@@ -1,7 +1,8 @@
 module.exports =
   (pluginOptions = {}) =>
   (inputConfig = {}) => {
-    const extension = pluginOptions.extension || /\.mdx$/
+    const extension =
+      pluginOptions.extension || (process.env.TURBOPACK ? 'mdx' : /\.mdx$/)
     const userProvidedMdxOptions = pluginOptions.options
 
     const mdxRsOptions = inputConfig?.experimental?.mdxRs
@@ -47,13 +48,35 @@ module.exports =
     })
 
     if (process.env.TURBOPACK) {
+      if (
+        !(
+          Array.isArray(extension) &&
+          extension.every((e) => typeof e === 'string')
+        ) &&
+        typeof extension !== 'string'
+      ) {
+        throw new Error(
+          '@next/mdx: Turbopack only supports a single extension string or list of extensions. `extension` was',
+          extension
+        )
+      }
+
+      const extensions = (
+        typeof extension === 'string' ? [extension] : extension
+      )
+        // Remove any leading dot from the extension as this is a common mistake.
+        .map((ext) => ext.replace(/^\./, ''))
+
+      const rules = nextConfig?.turbopack?.rules || {}
+      for (const ext of extensions) {
+        rules['*.' + ext] = {
+          loaders: [loader],
+          as: '*.tsx',
+        }
+      }
+
       nextConfig.turbopack = Object.assign({}, nextConfig?.turbopack, {
-        rules: Object.assign({}, nextConfig?.turbopack?.rules, {
-          '*.mdx': {
-            loaders: [loader],
-            as: '*.tsx',
-          },
-        }),
+        rules,
         resolveAlias: Object.assign({}, nextConfig?.turbopack?.resolveAlias, {
           'next-mdx-import-source-file':
             '@vercel/turbopack-next/mdx-import-source',

test/development/acceptance-app/ReactRefreshRegression.test.ts

@@ -335,9 +335,7 @@ describe('ReactRefreshRegression app', () => {
     files.set(
       'next.config.js',
       outdent`
-        const withMDX = require("@next/mdx")({
-          extension: /\\.mdx?$/,
-        });
+        const withMDX = require("@next/mdx")();
         module.exports = withMDX({
           pageExtensions: ["js", "mdx"],
         });

test/development/acceptance/ReactRefreshRegression.test.ts

@@ -25,18 +25,18 @@ describe('ReactRefreshRegression', () => {
         outdent`
           import Document from 'next/document'
           import { ServerStyleSheet } from 'styled-components'
-  
+
           export default class MyDocument extends Document {
             static async getInitialProps(ctx) {
               const sheet = new ServerStyleSheet()
               const originalRenderPage = ctx.renderPage
-  
+
               try {
                 ctx.renderPage = () =>
                   originalRenderPage({
                     enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
                   })
-  
+
                 const initialProps = await Document.getInitialProps(ctx)
                 return {
                   ...initialProps,
@@ -321,9 +321,7 @@ describe('ReactRefreshRegression', () => {
         [
           'next.config.js',
           outdent`
-              const withMDX = require("@next/mdx")({
-                extension: /\\.mdx?$/,
-              });
+              const withMDX = require("@next/mdx")();
               module.exports = withMDX({
                 pageExtensions: ["js", "mdx"],
               });

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

@@ -1,6 +1,6 @@
 import nextMDX from '@next/mdx'
 const withMDX = nextMDX({
-  extension: /\.mdx?$/,
+  extension: process.env.TURBOPACK ? ['md', 'mdx'] : /\.mdx?$/,
   options: {
     remarkPlugins: [],
     rehypePlugins: [['rehype-katex', { strict: true, throwOnError: true }]],

test/e2e/app-dir/mdx/pages/pages/import/index.tsx

@@ -1,8 +1,9 @@
-import MDXContent from './mdx-file.mdx'
+import MDContent from './md-file.md'
+
 export default function Page() {
   return (
     <>
-      <MDXContent />
+      <MDContent />
     </>
   )
 }

…-dir/mdx/pages/pages/import/mdx-file.mdx …pp-dir/mdx/pages/pages/import/md-file.mdtest/e2e/app-dir/mdx/pages/pages/import/mdx-file.mdx renamed to test/e2e/app-dir/mdx/pages/pages/import/md-file.md test/e2e/app-dir/mdx/pages/pages/import/mdx-file.mdx renamed to test/e2e/app-dir/mdx/pages/pages/import/md-file.md

@@ -1,5 +1,5 @@
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: process.env.TURBOPACK ? ['mdx', 'md'] : /\.mdx?$/,
 })
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'mdx'],

test/integration/plugin-mdx-rs/next.config.js

@@ -45,7 +45,7 @@ describe('MDX-rs Configuration', () => {
 
       nextConfig.write(`
       const withMDX = require('@next/mdx')({
-        extension: /\\.mdx?$/,
+        extension: process.env.TURBOPACK ? ['mdx', 'md'] : /\\.mdx?$/,
       })
       module.exports = withMDX({
         pageExtensions: ['js', 'jsx', 'mdx'],