# MDX Loader Issues in Next.js 15.5.x (with Turbopack) - and How to Fix Them

Created: 2025-08-27

1 min read

Next.js

Turbopack

MDX

JavaScript

Frontend

## Table of Contents

* [The Problem](#the-problem)
* [The Solution](#the-solution)
* [Conclusion](#conclusion)

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](#the-problem)

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

Shell

Copy

```shell
[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](#the-solution)

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

JavaScript

Copy

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

and the fix is removing `require()`.

JavaScript

Copy

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

## [Conclusion](#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.