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

53 浏览
0 Comments

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

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

import ReactMarkdown from "react-markdown";
export default function name({ posts }) {
  return (
    <>
          {posts.Title}
        
    
  );
}
export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();
  return {
    props: { posts },
  };
}

\n但是当我运行时，它给出了以下错误：\n\"enter\n我正在使用v14.17.0版本的node，并尝试添加\"type\": \"module\"。\n我的package.json文件如下：\n{\n \"name\": \"passportlegacy\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"babel-plugin-inline-react-svg\": \"^2.0.1\",\n \"next\": \"11.0.1\",\n \"next-images\": \"^1.8.1\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"react-map-gl\": \"^6.1.16\",\n \"react-markdown\": \"^7.0.1\",\n },\n \"devDependencies\": {\n \"@svgr/webpack\": \"^5.5.0\",\n \"@types/react\": \"17.0.16\",\n \"eslint\": \"7.32.0\",\n \"eslint-config-next\": \"11.0.1\",\n \"typescript\": \"4.3.5\"\n }\n}\n

0

3 答案

0 Comments

问题原因：错误信息提示无法加载ES模块，是因为在使用`require()`加载ES模块时不被支持。

解决方法：将`react-markdown`的版本升级为`6.0.0`，然后执行`npm install`命令安装依赖。

以下是完整的解决步骤：

1. 修改项目的`package.json`文件，将`react-markdown`的版本改为`^6.0.0`：

"dependencies": {

"react-markdown": "^6.0.0"

}

2. 执行`npm install`命令来安装依赖：

npm install

通过以上操作，应该能够解决错误提示中的问题。

请注意，本文提供的解决方法是基于作者提供的信息，如有需要，可以在回答中添加引用或文档链接，以便其他人可以确认答案的正确性。

0
0 Comments

问题的出现原因是Node当前将你的.js文件视为CommonJS，而不是ES模块。因此，你需要告诉Node将其视为ES模块。

解决方法是在你的package.json文件中添加"type": "module"。你可以将它放置在顶层的任何位置。例如：

{

"name": "passportlegacy",

"version": "0.1.0",

"type": "module",

"private": true,

"scripts": {

...

}

...

}

更多信息请参考：[package.json and file extensions - Node.js 14.x LTS documentation](https://nodejs.org/api/packages.html#packages_package_json_and_file_extensions)

在package.json中的哪个位置应该放置"type": "module"？

你可以将它放置在顶层的任何位置。我在答案中添加了一个示例。

0
0 Comments

问题的出现原因是react-markdown从版本6迁移到版本7时，移除了对CommonJS的支持，只支持ES模块（ESM）。然而，Jest在2021年10月仍然只对纯ESM模块具有实验性支持，因此无法正确加载react-markdown的ES模块。

解决方法是将react-markdown固定版本为6，因为版本6仍然支持CommonJS模块，在Jest中可以正常运行。预计Jest的下一个主要版本（版本28）可能会支持ES模块。

然而，一些人认为react-markdown过早地转向了纯ES模块，可以像其他库一样构建混合包，同时支持CommonJS和ES模块。此外，Jest 28可能仍然受到nodejs的限制，无法完全支持ES模块。

解决该问题的具体方法是将react-markdown版本固定为6，或等待Jest的下一个主要版本（版本28）或nodejs的进一步更新，以获得对ES模块的全面支持。

参考链接：

- react-markdown版本7的ESM说明：https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

- Jest对ES模块的实验性支持：https://github.com/facebook/jest/blob/64de4d7361367fd711a231d25c37f3be89564264/docs/ECMAScriptModules.md

- Jest版本28受限制的问题：https://github.com/nodejs/node/issues/37648

0