I have pretty standard setup that is closely based on the examples from next.js and next-mdx-remote. Everything works, until I add rehypeHighlight to the rehypePlugins array. Then I get this error, any idea why that would happen? Thanks.
TypeError: Object.hasOwn is not a function
import { serialize } from "next-mdx-remote/serialize";
import rehypeHighlight from "rehype-highlight"
export async function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const {content, data} = matter(fileContents)
const mdxSource = await serialize(content, {
// Optionally pass remark/rehype plugins
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [rehypeHighlight],
},
scope: data,
});
// Combine the data with the id and contentHtml
return {
id,
mdxSource,
data
}
}
Rendering:
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id);
return {
props: {
source: postData.mdxSource,
postData: postData.data,
}
}
}
export default function Post({ source, postData }) {
return (
<Layout>
<Head>
<title>{postData.title}</title>
</Head>
<article>
<h1 className={utilStyles.headingXl}>{postData.title}</h1>
<div className={utilStyles.lightText}>
<Date dateString={postData.date} />
</div>
<section>
<MDXRemote {...source} />
</section>
</article>
</Layout>
);
}
