从 Next.js 基本示例演练中获取错误答案

【问题标题】：Getting error from Next.js basic example walkthrough从 Next.js 基本示例演练中获取错误
【发布时间】：2022-04-24 15:52:19
【问题描述】：

运行 Next 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"
  }
}

我是新手，我只是想了解代码的工作原理。出了什么问题，我应该怎么做才能纠正它？

这是演练链接：https://nextjs.org/learn/basics/create-nextjs-app

【问题讨论】：

你能发布你的 package.json 文件吗？

标签： next.js

【解决方案1】：

可以使用以前版本的remark和remark-html

   "remark": "^13.0.0",
   "remark-html": "^13.0.1"

【讨论】：

完成此操作后不要忘记重新启动您的下一个服务器！
我也不得不像这样替换导入：import remark from 'remark'
是的，值得添加以下行：import { remark } from 'remark' 需要替换为：import remark from 'remark'

【解决方案2】：

我相信转译后的代码会尝试 require() 注释，它作为 ES 模块发布，Next 的 webpack 配置并不完全支持。

这似乎与这里提出的相同问题 https://github.com/vercel/next.js/issues/23725
他们最近在他们的金丝雀分支上发布了一个修复程序，你可以在你的项目中尝试它npm install next@canary

【讨论】：

【解决方案3】：

import { remark } from "remark";

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。