I'm encountering an issue with my setup that is based on examples from next.js and next-mdx-remote. Everything was working fine until I added rehypeHighlight to the rehypePlugins array, which resulted in this error. Any thoughts on why this could be happening? 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>
);
}
Update: package.json
"dependencies": {
"date-fns": "^2.25.0",
"eslint": "8.36.0",
"eslint-config-next": "12.3.4",
"gray-matter": "^4.0.2",
"next": "12.3.4",
"next-fonts": "^1.5.1",
"next-mdx-remote": "^3.0.1",
"next-routes": "^1.4.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-p5-wrapper": "^4.1.1",
"react-unity-webgl": "^9.4.0",
"react-use": "17.4.0",
"rehype-highlight": "^7.0.0",
"remark": "^13.0.0",
"remark-html": "^13.0.2"
}