NextJS/React使用react-markdown渲染markdown失败问题求助

问题原因 #

• 依赖版本不兼容：react-markdown 与 remark-gfm 的大版本不匹配是最高发诱因，高版本react-markdown搭配过低版本的remark-gfm，或者反之都会导致解析逻辑异常。
• Markdown内容缩进异常：定义source的模板字符串每一行都带有大量前置缩进，按照Markdown标准解析规则，带4个及以上前置空格的行会被识别为代码块，导致标题、删除线等格式无法正常解析。
• NextJS服务端组件限制：若使用NextJS 13+的App Router，默认所有组件为服务端组件，react-markdown部分版本在服务端运行环境中会出现解析失效问题。
• 属性传递规则不符：部分旧版本react-markdown不支持直接通过children传递Markdown内容，需使用source属性传递才会触发解析逻辑。

解决方法 #

1. 安装匹配的依赖版本 #

先卸载现有不兼容依赖，安装经过验证的兼容版本组合：

npm uninstall react-markdown remark-gfm
npm install react-markdown@9 remark-gfm@4

使用yarn、pnpm等其他包管理器的场景对应替换命令即可。

2. 修正Markdown内容格式 #

去除模板字符串中的多余前置缩进，可搭配trim()方法去除首尾空白字符：

const source = `# Hello, world!
---
~this doesn't work.~ 
`.trim();

3. 标记客户端组件（NextJS App Router场景） #

如果是NextJS 13+ App Router项目，在文件顶部添加'use client'指令，将组件标记为客户端组件：

'use client'
import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';

const PostContent = () => {
    const source = `# Hello, world!
---
~this doesn't work.~ 
`.trim();
    return (
        <ReactMarkdown remarkPlugins={[gfm]}>
            {source}
        </ReactMarkdown>
    );
};

export default PostContent;

4. 适配旧版本属性规则 #

如果使用的是v6以下的react-markdown版本，将内容通过source属性传递即可：

<ReactMarkdown remarkPlugins={[gfm]} source={source} />

内容的提问来源于stack exchange，提问作者Pro Poop