Milkdown 在 React 19 环境下的兼容性问题解析

Milkdown 是一款优秀的开源 Markdown 编辑器组件，基于 ProseMirror 构建，提供了丰富的功能和插件系统。最近有开发者反馈在使用 React 19 和 Next.js 15.1.5 环境下遇到了兼容性问题。

问题现象

当开发者在 React 19 环境中使用 @milkdown/react 包时，控制台会抛出以下错误：

TypeError: (0 , {imported module}.createContext) is not a function

这个错误发生在尝试创建 React 上下文时，表明框架无法正确识别 React 的 createContext 方法。

问题根源

经过分析，这个问题实际上不是 Milkdown 本身的兼容性问题，而是 React 19 在 Next.js 环境下的特殊行为导致的。在 Next.js 应用中，默认情况下组件是在服务端渲染的（SSR），而 Milkdown 编辑器作为一个富文本编辑组件，必须运行在客户端环境中。

解决方案

解决这个问题的方法很简单：确保 Milkdown 编辑器组件在客户端渲染。在 Next.js 中，可以通过在组件文件顶部添加 'use client' 指令来实现：

'use client'

import React from "react";
import { Editor, rootCtx } from "@milkdown/kit/core";
import { nord } from "@milkdown/theme-nord";
import { Milkdown, MilkdownProvider, useEditor } from "@milkdown/react";
import { commonmark } from "@milkdown/kit/preset/commonmark";

const MilkdownEditor: React.FC = () => {
  // ...组件实现
};

技术背景

这个问题的出现与 React 19 和 Next.js 15 的架构变化有关：

1. React 服务器组件(RSC)：React 19 引入了更强大的服务器组件支持，默认情况下 Next.js 会尝试在服务端渲染组件。

2. 客户端边界：像编辑器这样的交互式组件需要访问浏览器 API，必须明确标记为客户端组件。

3. 上下文限制：React 上下文(Context)只能在客户端组件中使用，服务端组件无法创建或消费上下文。

最佳实践

对于 Milkdown 或其他富文本编辑器在 Next.js 中的使用，建议：

1. 始终将编辑器组件标记为客户端组件
2. 考虑使用动态导入延迟加载编辑器，减少初始包大小
3. 对于复杂的编辑器配置，可以将状态管理提升到父组件

总结

虽然最初看起来像是 Milkdown 的兼容性问题，但实际上这是 React 19 和 Next.js 15 架构变化带来的预期行为。通过正确标记组件边界，开发者可以轻松解决这个问题。这也提醒我们在使用现代 React 框架时，需要更加注意组件的渲染环境区分。