Использование MDX и rehype-highlight на веб-сайте next.js для рендеринга MD, содержащего код, приводит к сбою Object.hasOwn

У меня довольно стандартная настройка, основанная на примерах из next.js и next-mdx-remote. Все работает, пока я не добавляю rehypeHighlight в массив rehypePlugins. Затем я получаю эту ошибку, есть идеи, почему это произойдет? Спасибо.

Ошибка типа: Object.hasOwn не является функцией

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
    }
}

Рендеринг:

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>
    );
}

Обновлять: пакет.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"
  }

какую версию узла вы используете?

— 21.05.2024 23:40

@Sai Версия узла: v12.22.9

— 21.05.2024 23:58

javascript next.js

21.05.2024 22:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный