v5 is coming on May 22. Test your apps!

[dstaley]

The next major release of next-mdx-remote, v5, will be released on May 22! This version will be compatible with the latest version of MDX and other packages (such as remark plugins). It also makes significant changes to how the package is published, which should reduce the number of TypeScript errors, especially in apps using modern module resolution strategies.

You can help catch any last remaining bugs by installing the latest canary version and testing your applications.

npm install next-mdx-remote@canary

If you encounter any issues, please open an issue with a minimal reproduction so that we can investigate.

[nekochan0122]

No more TS errors, great job 🎉

https://nekochan.vercel.app/writings/hello-world

[typeofweb]

I get this error in Next.js 14.3.0-canary.53. It has appeared since canary.44, when they switched to React 19 beta:

⨯ 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>)

[dstaley]

@typeofweb Thanks for sharing this! I've opened a new issue so I can track this down and share updates. If you happen to have a minimal reproduction that'd be greatly appreciated, otherwise I'll try to get to this early next week.

[karlhorky]

I get this error in Next.js 14.3.0-canary.53. It has appeared since canary.44, when they switched to React 19 beta:

⨯ 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>)

Also ran into the Error: Functions cannot be passed directly to Client Components... error just now when upgrading to Next.js version [email protected]

I wanted to find a way around this, and I ended up finding rsc-mdx by @zhangyu1818 - this library uses evaluate ("When you trust your content, evaluate can work...") - the whole library is pretty much just a single wrapper RSC component:

import { evaluate, type EvaluateOptions } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'

export async function MDX(props: MDXProps) {
  const { source, ...rest } = props
  const { default: MDXContent } = await evaluate(source, {
    ...rest,
    ...(runtime as Pick<EvaluateOptions, 'Fragment' | 'jsx' | 'jsxs'>),
  })

  return <MDXContent />
}

I tried replacing next-mdx-remote/rsc with copying and pasting the simple evaluate() code, and it's (surprisingly?) working without any MDX Next.js / bundler library like next-mdx-remote or mdx-bundler.

Is this a simpler alternative to using these libraries, for React Server Components environments?

[dstaley]

@typeofweb @karlhorky Would y'all mind providing a reproduction in #458? Based on the error message it looks like you're passing generated MDX from server to client, which should work via children, but not via other props. Having a reproduction would make this much easier to track down.

[karlhorky]

Added a reproduction - no Client Components necessary:

• Unable to import MDXContent with React 19 beta #458 (comment)

[dstaley]

[email protected] is now available! 🎉

[karlhorky]

@dstaley thanks for all the hard work and effort put in here!