Error: Cannot read properties of null (reading 'useState') - package not working with Next.JS 14

[hassanzadeh]

Describe the bug

Hey Guys,
MDXRemote does not work on Next.JS 14 with app-based routing. Have you tested it? I saw someone said she imported MDXRemote 'next-mdx-remote/rsc", but that doesn't make sense, not sure what she did.

Thanks for the help

Reproduction

`.
const BlogPost = async ({
params,
}: {
params: { slug: string; category_or_slug: string };
}) => {
const post = await getPost(params.category_or_slug, params.slug);

if (!post) return notFound();

const {
subject,
content,
createdAt,
authors,
tags,
postCategories,
relevantPosts,
} = post;

const mdxSource = await serialize(content, {
scope: {},
mdxOptions: {
rehypePlugins: [rehypeCodeTitles, rehypeKatex], //Looks like rehypePrism is not working with next js 14!!!
remarkPlugins: [remarkMath, remarkGfm],
},
parseFrontmatter: true,
});

...

<MDXRemote
{...mdxSource}

                components={components}
              />

`

next-mdx-remote version

v5

[hassanzadeh]

For those facing this, compileMDX fixed it. However, I dont think the rehype plugins are accepted as i'm getting ts warnings when passing them.

[hassanzadeh]

I can confirm that this package is no longer working with rehypeKatex and probably other plugins. Previously simple formula like: x = \frac{1}{\sqrt{2}} where being compiled without any problem but now it results in this error:
An error occurred!
[next-mdx-remote] error compiling MDX: Could not parse expression with acorn More information: https://mdxjs.com/docs/troubleshooting-mdx