Dev server not working when using @next/mdx with plugins and --turbo

[carloscuesta]

Link to the code that reproduces this issue

https://github.com/carloscuesta/next-mdx-turbo-plugins-issue

To Reproduce

1. Clone the provided repository
2. Install the dependencies
3. Run the development server

Current vs. Expected behavior

I'm expecting that the dev server starts normally however the process ends with the following error:

Error: loader /Users/carloscuesta/Downloads/next-mdx-turbo-issue/node_modules/.pnpm/@next+mdx@15.0.1_@mdx-js+loader@3.1.0_acorn@8.13.0_/node_modules/@next/mdx/mdx-rs-loader.js for match "*.mdx" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.

The error doesn't happen when I remove the plugin that I'm passing into the withMDX function:

❌ Error: pnpm run dev --turbopack

export default withMDX({
  options: {
    remarkPlugins: [remarkGfm]
  }
})(nextConfig);

✅ No error: pnpm run dev --turbopack

export default withMDX({
  options: { remarkPlugins: [] }
})(nextConfig);

✅ No error: pnpm run dev (without turbo flag)

export default withMDX({
  options: { remarkPlugins: [remarkGfm] }
})(nextConfig);

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: 9.12.2
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Markdown (MDX), Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[kylemh]

Also replicable via https://tailwindui.com/templates/spotlight

• Install deps
• Use codemod to upgrade to Next 15 (with or without React 19)
• Run dev server
• See same error as OP

[JayamalHettiarachchi]

I'm having the same issue with Next 15.0.1

[nimaa77]

passing remarkPlugins or rehypePlugins to createMDX breaks the dev server (with turbo)

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeSlug],
  },
});

[jxnnyo]

Experiencing same issues as OP.

const withMDX = createMDX({
  // Add markdown plugins here, as desired
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
});

var nextConfig = withAxiom(withMDX(config));

Error: loader C:\Users\---\node_modules\.pnpm\@mdx-js+loader@3.1.0_acorn@8.13.0_webpack@5.91.0_esbuild@0.19.12_\node_modules\@mdx-js\loader\index.cjs for match "*.mdx" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.

[wesbos]

Also hitting this. Works fine without --turbo

Removing rehype plugins allows it to run

[keegandonley]

Chiming in that I have this same issue on version 15.0.2, with the same reproductions as others

[timneutkens]

MDX plugins are JavaScript functions which can't be transferred into Turbopack (given it's not JS), we'll have to add something like mdx.config.js to the MDX loader (and that flows into @next/mdx) so that these plugins don't have to be passed around like they are currently.

For now you can remove --turbopack to have it run. The issue has already been triaged, you don't have to post comments saying "it still happens", that's expected when the issue is open 🙂

[karlhorky]

This has now been documented in the Next.js docs - in the remark and rehype plugins section:

• Correct reason for Turbopack incompat, remove inaccurate "good to know" #72467

[karlhorky]

@timneutkens thanks for the implementation of MDX plugins in Turbopack (remark, rehype, recma plugins)!

I see it was released in next@15.0.4-canary.16

I opened a new PR documenting the new capabilities of using plugins via the string name config over here:

• Clarify how MDX plugins are supported in Turbopack #72917

[bdrtsky]

So what's the solution? Why it's closed? I can't use plugins with --turbopack, so I have to remove it. Because this makes MDX unusable in Next.js.

[karlhorky]

@bdrtsky I think maybe you missed reading my comment above fully?

It's now possible to use remark/rehype/recma plugins with Turbopack.

My PR linked above added documentation for that, at the "Using Plugins with Turbopack" docs section here:

• https://nextjs.org/docs/canary/app/building-your-application/configuring/mdx#using-plugins-with-turbopack

[carloscuesta]

@bdrtsky It's not released yet outside of canary, so you'll have to wait or use the canary version to use remark/rehype plugins with --turbo.