React-Markdown 错误：必须使用导入来加载 ES 模块：答案

【问题标题】：React-Markdown Error: Must use import to load ES Module:React-Markdown 错误：必须使用导入来加载 ES 模块：
【发布时间】：2021-09-02 10:07:26
【问题描述】：

我尝试将react-markdown 安装到我的 nextjs 项目中，但是当我尝试使用它时立即出现以下错误。

我的代码：

import React from 'react'

import ReactMarkdown from 'react-markdown'

export function Markdown({ markdown }: { markdown: string }) {
  return (
    <article className="prose-sm">
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </article>
  )
}

错误信息：

Error: Must use import to load ES Module: /Users/username/Projects/mono/node_modules/react-markdown/index.js
require() of ES modules is not supported.
require() of /Users/username/Projects/mono/node_modules/react-markdown/index.js from /Users/username/Projects/mono/dist/apps/webapp/.next/server/pages/_app.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 index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/username/Projects/mono/node_modules/react-markdown/package.json

我正在使用以下版本： v14.17.5 和 yarn 1.22.11 上的节点，我当前的 Nextjs 版本是 ^12.6.2

【问题讨论】：

标签： javascript reactjs next.js react-markdown

【解决方案1】：

我在 Github 上找到了以下解决方案。 Here

您需要将next-transpile-modules 添加到您的next.config.js，如下所示。

// next.config.js

const withTM = require('next-transpile-modules')(['react-markdown']);

module.exports = withTM({
...
})

你需要像这样导入 react-markdown： import ReactMarkdown from 'react-markdown/react-markdown.min';

【讨论】：