Using MDXRemote in a client component gives Error: Element type is invalid

[ChunML]

Describe the bug

In a NextJS application, when I use MDXRemote within a client component, the console shows the following error:

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The error above occurs on production build as well.

How to reproduce:

next: v14.2.10
typescript: v5.1.6
next-mdx-remote: v4.4.1 (happens on v5.0.0 as well)

1. Initialize a typical NextJS with Typescript
2. Create a test page (Ex: app/test/page.tsx)
3. Define a normal NextPage like below:

import { serialize } from 'next-mdx-remote/serialize';
import TestComponent from '@/app/test-mdx/TestComponent';

const TestMdx = async () => {
  const mdxSource = await serialize('### This is a header');

  return (
    <TestComponent source={mdxSource} />
  );
};

export default TestMdx;

4. Create the TestComponent component

'use client';

import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote';
import { FC } from 'react';

interface Props {
  source: MDXRemoteProps
}

const TestComponent: FC<Props> = ({ source }) => (
  <MDXRemote {...source} />
);

export default TestComponent;

5. Navigate to /test-mdx
6. Refresh the browser by clicking the refresh button
7. Check the console (both server and client)

Note: the example above is just a simple way to reproduce the problem I had. Some of you might suggest importing from next-mdx-remote/rsc and in fact, the error above did not occur in the server component setup. But in my real application, I have to use MDXRemote within a client component, that's why I created the code above to test. It turned out that the simple setup above is enough to get the error (at first I thought it was because of the custom components that I pass into MDXRemote).

Reproduction

https://github.com/ChunML/next-mdx-error

next-mdx-remote version

v4.4.1 (can reproduce on v5.0.0 too)

[saamdotexe]

+1

[davidmytton]

This broke when going from Next.js 14.1.4 to 14.2. I was able to workaround the error by switching to https://github.com/ipikuka/next-mdx-remote-client instead. It's a fork of https://github.com/hashicorp/next-mdx-remote so isn't a drop in replacement, but it wasn't difficult to switch.

Server side I switched from await serialize(content) to await serialize({ source }) and then in the client component I used the hydrate method:

import { hydrate } from "next-mdx-remote-client";
// ...
const { content, mod, error } = hydrate({ ...content, components });

You can then get the context in the component with {content}.

I just deployed this to https://console.dev in consoledotdev/home#572

[hmellahi]

@davidmytton Saved my life lol, Cheers!

[talatkuyuk]

@davidmytton Saved my life lol, Cheers!

As the author of next-mdx-remote-client, didn’t I save your life, @hmellahi? 😄 Glad to hear the good things 💯 :)