Element rendered from older version of React error with latest next@canary releases

[hamlim]

Describe the bug

I get the following error in development and in production when using next-mdx-remote/rsc within my Next.js application:

Error: 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 is 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.

My hunch is that it is because of the dynamic require of the jsx-runtime, however this could also be a bug in Next.

Reproduction

https://github.com/hamlim/next-mdx-remote-jsx-runtime-bug

next-mdx-remote version

v5.0.0

[hamlim]

I'll cross report to Next as well, just in case it's an issue on their end!

[hamlim]

Added this comment on my Next.js related issue as well:

My hunch is that this code within that package is the problematic part: hashicorp/next-mdx-remote@17d6598/src/jsx-runtime.cjs#L11-L15

[dominik-sfl]

Are there any news on this? Were you able to figure something out?

[hamlim]

I ended up effectively "forking" this package into our codebase to fix this issue - we weren't relying on too many core parts of the library and instead just needed to use MDX directly to transform the content on the fly.

[beamcode]

Any fixes to share?

[eposha]

Next.js 15 same issue

[akgec-saurabh]

using transpilePackages: ["next-mdx-remote"], in next config remove the error for nextjs 15 https://github.com/hashicorp/next-mdx-remote?tab=readme-ov-file#installation

[ryanleichty]

I was running into the same issue using the portfolio template. Adding transpilePackages: ['next-mdx-remote'] to the next config solved the issue.