Next.js 11.1 + TypeScript项目导入react-markdown运行报错如何解决？

算力阿峰

2026-9-29

解决方案

方案1：调整导入路径（最快生效）

react-markdown v7提供了CommonJS兼容的导入路径，直接修改组件的导入语句即可：

// 把原来的默认导入改成下面的写法
import { ReactMarkdown } from 'react-markdown/lib/react-markdown'

无需修改其他配置，修改后即可正常运行。

方案2：动态导入关闭SSR

如果是不需要服务端渲染markdown内容的场景，可以用Next.js自带的动态导入能力，跳过服务端解析ESM包的步骤：

import React from 'react';
import dynamic from 'next/dynamic';
// 动态导入react-markdown，关闭服务端渲染
const ReactMarkdown = dynamic(() => import('react-markdown'), { ssr: false });

type TestComponentProps = {
  summaryTitle: string;
  markdownString: string;
};

export const TestComponent = ({ summaryTitle, markdownString }: TestComponentProps): JSX.Element => {
  return (
    <div className="container">
      <h2 id="ratingsId">
        {summaryTitle}
      </h2>
      <p>{markdownString}</p>
      <ReactMarkdown>{markdownString}</ReactMarkdown>
    </div>
  );
};

方案3：使用next-transpile-modules转译ESM包

如果需要保留markdown内容的服务端渲染/SSG渲染能力，可通过转译工具处理ESM包：

安装依赖：

npm install next-transpile-modules --save-dev

修改next.config.js配置：

const withTM = require('next-transpile-modules')(['react-markdown', 'unified', 'remark-parse', 'remark-rehype']);

module.exports = withTM({
  // 保留你原来的所有配置
  experimental: {
    esmExternals: 'loose'
  }
});