错误：必须使用 import 加载 ES 模块：D:\node_modules\react-markdown\index.js 不支持 ES 模块的 require()

Question

目前我正在使用"react": "17.0.2"并且已经安装"react-markdown": "^7.0.1"通过npm i react-markdown我正在使用这个包来显示我从 Strapi CMS 获取的富文本。我使用以下代码来显示内容：

import ReactMarkdown from "react-markdown";

export default function name({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
        <ReactMarkdown source={posts.Content} escapeHtml={false} />
      </div>
    </>
  );
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

但是当我运行它时，它给了我以下错误：

我正在使用节点v14.17.0并尝试添加"type": "module".

我的package.json：

import ReactMarkdown from "react-markdown";

export default function name({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
        <ReactMarkdown source={posts.Content} escapeHtml={false} />
      </div>
    </>
  );
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

Answer 1

我通过将react-markdown固定到版本6来解决这个问题。

在 React-Markdown 版本 7 中，他们仅转向 ESM。这里有一个关于这意味着什么的解释，但截至 2021 年 10 月，Jest（版本 27）仍然只对纯 ESM 模块提供实验性支持。我无法让它在我的项目中工作，并且 React-markdown 版本 6目前工作正常。

我认为 Jest 的下一个主要版本（版本 28）可能会支持 ESM。