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/@[email protected]_@[email protected][email protected]_/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 (with --turbo flag)

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

✅ No error: pnpm run dev (with --turbo flag)

export default withMDX({
  options: { remarkPlugins: [] }
})(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\@[email protected][email protected][email protected][email protected]_\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

[dzienisz]

I have the same problem. I tried many versions and configs but nothing helped.

Error: loader /Users/home/Developer/xxx/node_modules/.pnpm/@[email protected][email protected]/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.

[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 🙂

[dzienisz]

... 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 🙂

True in this base, but sometimes it shows the urgency and importance of a fix.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[karlhorky]

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

• https://github.com/vercel/next.js/pull/72467

[karlhorky]

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

I see it was released in [email protected]

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

• https://github.com/vercel/next.js/pull/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.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.