React 19 搭配 Next.js 15 时 react-quill 无法加载的问题求助

错误原因 #

React 19正式移除了ReactDOM.findDOMNode() API，而react-quill v2.x及以下版本内部仍在调用该方法，导致出现TypeError: react_dom_1.default.findDOMNode is not a function的兼容性错误。

解决方案 #

1. 替换为适配React 19的编辑器组件 #

使用社区维护的适配新版本React的分支组件@uiw/react-quill，它完全兼容React 19和Next.js 15：

• 安装命令：

  npm install @uiw/react-quill
  # 或
  yarn add @uiw/react-quill
  

• 替换原组件导入：

  // 替换前
  import ReactQuill from 'react-quill';
  // 替换后
  import ReactQuill from '@uiw/react-quill';
  

  组件用法与官方react-quill基本一致，无需大幅修改业务代码。

2. 手动补丁修复官方react-quill（临时方案） #

若坚持使用官方react-quill，可手动修改源码移除findDOMNode调用：

• 找到node_modules/react-quill/lib/quill.js文件，定位到调用findDOMNode的代码段（通常在组件挂载或更新逻辑中）。
• 将const node = ReactDOM.findDOMNode(this);替换为通过ref获取DOM节点：

  // 先在组件类中定义ref
  this.quillRef = React.createRef();
  // 绑定到对应元素（比如render方法中的容器div）
  <div ref={this.quillRef}></div>
  // 替换原findDOMNode调用
  const node = this.quillRef.current;
  

  注意：依赖包更新后补丁会失效，仅适合临时应急。

3. Next.js环境专属配置 #

• App Router下标记为客户端组件：在使用编辑器的组件顶部添加'use client'指令，确保组件在客户端渲染。
• 动态导入禁用SSR：如果使用动态导入，需指定ssr: false避免服务器端DOM缺失错误：

  import dynamic from 'next/dynamic';
  const ReactQuill = dynamic(() => import('@uiw/react-quill'), { ssr: false });
  

验证 #

完成配置后重启Next.js开发服务器，检查编辑器是否正常加载，确认报错信息消失。

内容的提问来源于stack exchange，提问作者JAKER HOSSAIN