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

Question

我尝试安装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

我正在使用以下版本：Node on v14.17.5and yarn 1.22.11，我当前的 Nextjs 版本是^12.6.2

Answer 1

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

您需要添加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';