MDX Loader Issues in Next.js 15.5.x (with Turbopack)

One thing I like to do is keep my dependencies up to date. I usually use canary or at least latest and make it a habit to update daily. This allowed me to catch an interesting issue with a recent update of Next.js to 15.5.x.

The Problem

When running next dev --turbo, I would get this error after the server started:

terminal

[Error: loader /Users/yiminyang/Documents/Projects/my-website/node_modules/.pnpm/@next+mdx@15.5.2_@mdx-js+loader@3.1.0_acorn@8.15.0__@mdx-js+react@3.1.0_react@19.1.1_types-react@19.0.0-rc.1_/node_modules/@next/mdx/mdx-js-loader.js for match "#next-mdx" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.]

A short research revealed it is a compatibility issue between MDX plugins and Turbopack in Next.js.

The Solution

Fortunately, the fix is pretty straightforward. My next.config.js looked like this:

const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: [require('remark-gfm'), require('remark-gemoji')],
        rehypePlugins: [],
    },
});

and the fix is removing require().

const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: ['remark-gfm', 'remark-gemoji'],
        rehypePlugins: [],
    },
});

Conclusion

While I am not entirely sure why this worked until now, since the issue should have occurred from the beginning, I am glad it turned out to be such an easy fix.