从Next.js基本示例演练中获取错误
从Next.js基本示例演练中获取错误
提问于 2021-08-03 18:25:09
在下一次JS初学者演练中运行代码时，我会得到以下错误：
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.remark (C:\*******\***********\.next\server\pages\index.js:3249:18)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../lib/posts.js (C:\*******\***********\.next\server\pages\index.js:132:64)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../pages/index.js (C:\*******\***********\.next\server\pages\index.js:2933:68) {
code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\**********\********\node_modules\remark\index.js
require() of ES modules is not supported.
require() of C:\*******\***********\node_modules\remark\index.js from C:\*******\***********\.next\server\pages\index.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\***********\********\node_modules\remark\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\*******\***********\node_modules\remark\package.json.下面是本教程(id.js)的这一部分重点介绍的文件：
import { getAllPostIds, getPostData } from '../../lib/posts'
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
return {
props: {
postData
}
}
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export default function Post({ postData }) {
return (
<html>
{postData.title}
<br />
{postData.id}
<br />
{postData.date}
<br />
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</html>
)
}这是package.json文件：
{
"name": "abhayrajio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"fs": "0.0.1-security",
"gray-matter": "^4.0.3",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"remark": "^14.0.1",
"remark-html": "^13.0.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.0.1"
}
}我对此很陌生，我只是想了解代码是如何工作的。哪里出了问题，我该怎么做才能纠正呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-08-06 15:48:17
您可以使用上一版本的备注和备注-html。
"remark": "^13.0.0",
"remark-html": "^13.0.1"Stack Overflow用户
发布于 2021-08-03 20:39:35
我相信转置的代码试图要求()备注，它是作为ES模块发布的，Next的webpack配置并不完全支持这个模块。
这似乎是在这里提出的同样的问题，https://github.com/vercel/next.js/issues/23725
他们最近在他们的金丝雀分支上发布了一个修复程序，您可以在您的项目中使用npm install next@canary来尝试它。
Stack Overflow用户
发布于 2022-04-24 07:52:19
import { remark } from "remark";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68641090
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号