export 'serialize' (reexported as 'serialize') was not found

[Knaackee]

At first, thanks for this repo and the hard work!

I am using the new React Server Component on Next.js 14. No problem here.

But I also want to use the client component for live preview on a different page.
The problem is that the client component does throw

../../../node_modules/next-mdx-remote/serialize.js
export 'serialize' (reexported as 'serialize') was not found in './dist/serialize.js' (module has no exports)

Here is my client component:

"use client";

import { MDXRemote as MDXRemoteClientComponent } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import { useEffect, useState } from "react";

export const MDXClientComponent = ({
  body,
  components,
}: React.PropsWithoutRef<{
  body: string;
  components: any;
}>) => {
  const [state, setState] = useState<{
    source: any;
  }>({
    source: undefined,
  });

  useEffect(() => {
    serialize(body, {
      mdxOptions: {
        development: true,
        format: "mdx",
      },
    }).then((source) => {
      setState({ source });
    });
  }, [body]);

  return (
    <div className="prose xl:prose-lg mx-auto max-w-5xl">
      {state.source && (
        <MDXRemoteClientComponent {...state.source} components={components} />
      )}
    </div>
  );
};

Any idea?

[vannyle]

Hi, I got the same issue when updating Next.js to v14. Did you figure out how to fix it or maybe any workaround?

[olayway]

I have the same issue.

[paramaggarwal]

#307

[stellarsite]

#307

I do not see an awnser for this specific issue in 307

[dstaley]

@Knaackee Thank you for reporting this! I believe this should be fixed in v5, which is available as a canary release in this PR.