错误:必须使用导入来加载ES模块:d：\node_Module\react markdown\index.js不支持ES模块的要求()

Question

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

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：

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "next": "11.0.1",
    "next-images": "^1.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-map-gl": "^6.1.16",
    "react-markdown": "^7.0.1",
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

Answer 1

我解决了这个问题，只需将react标记到版本6。

随着第7版的反应-标记，他们转移到ESM只。这是对这里的解释，但到2021年10月，Jest (版本27)仍然只有用于纯ESM模块的支持。我无法让它在我的项目中工作，而的第6版目前运行良好。

我认为Jest的下一个主要版本(版本28)可能支持ESM。

Answer 2

节点当前将您的.js文件视为CommonJS。您需要告诉Node将其视为ES模块。

尝试在您的"type": "module"文件中添加package.json。

你可以把它放在最高层的任何地方。例如：

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    ...
  }
  ...
}

更多信息：package.json和文件扩展名- Node.js 14.xLTS文档

Answer 3

使用此版本

"dependencies": {
    "react-markdown": "^6.0.0"
  }

然后发布

npm install