Unable to import `MDXContent` with React 19 beta

[dstaley]

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {$$typeof: ..., type: function MDXContent, key: ..., ref: ..., props: ..., _owner: ..., _store: ...}
                        ^^^^^^^^^^^^^^^^^^^
    at stringify (<anonymous>)

[karlhorky]

Reproduction:

1. Use npx create-next-app@canary (our app has next@14.3.0-canary.63)
2. In a Server Component (eg a page), import and use this component (no Client Component necessary)

import { MDXRemote } from 'next-mdx-remote/rsc';

export default function Notes() {
  return (
    <MDXRemote source="abc" />
  );
}

In our app, we also have "react" and "react-dom" set to 18.3.1 in package.json, but Next.js has its own compiled React version internally.

[dstaley]

@karlhorky Thank you so much! The important detail there is having react@18.3.1 in package.json. This issue does not reproduce if package.json contains react@19.0.0-rc-915b914b3a-20240515. I think there's some interaction between the v19 copy of React and the v18 copy that's causing this issue. I don't think we're going to have a stable release of either before v5, so this might need to be fixed once the dust settles because as it presents now I don't know if this is an actual issue or just a weird bug that's a result of mismatched React versions.

[dstaley]

I just received confirmation from the Next.js team that Next 15 will require React 19. This error only occurs when Next 15 (which is what the canary will be) is used with React 18, so I'm going to go ahead and close this.