🐛 A React Element from an older version of React was rendered" in Next.js App Router

[mimi566]

After updating to Next.js 15, I encountered the following error when rendering MDX content in the App Router (app/ directory):

A React Element from an older version of React was rendered. This is not supported. It can happen if:

• Multiple copies of the "react" package are used.
• A library pre-bundled an old copy of "react" or "react/jsx-runtime".
• A compiler tries to "inline" JSX instead of using the runtime.

This happened when I passed MDX content like this:

<Typography>{res.content}</Typography>

Everything else (like {res.frontmatter.title}) worked fine — so the issue clearly pointed to the MDX part.

Turns out, the issue was next-mdx-remote not being transpiled correctly in the App Router context — likely due to a mismatch in how React elements are bundled inside next-mdx-remote compared to the main app.

transpilePackages: ["next-mdx-remote"],

Here's my updated config:

const nextConfig = {
reactStrictMode: true,
swcMinify: true,
transpilePackages: ["next-mdx-remote"], // ✅ Fixes the issue
images: {
remotePatterns: [
{
protocol: "https",
hostname: "resct-xxxx.vercel.app",
},
{
protocol: "https",
hostname: "xxxx.io",
},
],
},
};
module.exports = nextConfig;