React-Markdown Error: Must use import to load ES Module:

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

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

Answer 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';

React-Markdown Error: Must use import to load ES Module:

React-Markdown Error: Must use import to load ES Module:

javascript

reactjs

next.js

react-markdown