[英]Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported
Currently I'm using "react": "17.0.2"
and I have installed "react-markdown": "^7.0.1"
via npm i react-markdown
I'm using this package to display my rich text that I'm fetching from my Strapi CMS.目前我正在使用
"react": "17.0.2"
并且我已经通过 npm 安装了"react-markdown": "^7.0.1"
npm i react-markdown
我正在使用这个包来显示我的富文本m 从我的 Strapi CMS 中获取。 I have used the following code to display the content:我使用以下代码来显示内容:
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 },
};
}
But when I run this it gives me the following error:但是当我运行它时,它给了我以下错误:
I'm using node v14.17.0
and have tried adding "type": "module"
.我正在使用节点
v14.17.0
并尝试添加"type": "module"
。
My package.json:我的 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"
}
}
I solved this by just pinning react-markdown to version 6.我通过将 react-markdown 固定到版本 6 来解决这个问题。
With version 7 of react-markdown they moved to ESM only.使用 react-markdown 的第 7 版,他们只迁移到 ESM。 There's a explanation of what that means here , but it seems Jest (version 27) still only has experimental support for pure ESM modules as of October 2021. I couldn't get it to work in my project, and version 6 of react-markdown works fine for now.
这里有一个关于这意味着什么的解释,但截至 2021 年 10 月,Jest(版本 27)似乎仍然只对纯 ESM 模块提供实验性支持。我无法让它在我的项目和 react-markdown 版本 6 中工作现在工作正常。
I think the next major version of Jest (version 28) will support ESM.我认为 Jest 的下一个主要版本(版本 28)将支持 ESM。
Node is currently treating your .js<\/code> file as CommonJS.
Node 当前将您的
.js<\/code>文件视为 CommonJS。
You need to tell Node to treat it as an ES module.
您需要告诉 Node 将其视为 ES 模块。
Try adding
"type": "module"<\/code> in your
package.json<\/code> file.
尝试在
package.json<\/code>文件中添加
"type": "module"<\/code> 。
You can place it anywhere at the top level.您可以将其放置在顶层的任何位置。 Eg:
例如:
{
"name": "passportlegacy",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
...
}
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.