react-draft-wysiwyg部分工具栏选项无法打开求助（Next.js14.0.4+React18.2.0）

问题场景 #

在Next.js 14.0.4 + React 18.2.0环境中使用react-draft-wysiwyg编辑器时，以下工具栏选项点击后无法弹出对应的操作面板：

• emoji表情选择器
• 字号（font size）下拉菜单
• 字体（font family）下拉菜单
• 链接插入弹窗
• 图片上传弹窗
• 颜色选择器（color pick）

可行解决方案 #

方案1：临时关闭React StrictMode #

React 18的StrictMode会触发组件双重渲染，而react-draft-wysiwyg的部分弹窗组件在这种机制下出现状态异常，关闭StrictMode可快速恢复功能：

1. 打开项目根目录的next.config.js/next.config.ts
2. 修改配置项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  // 保留其他原有配置
}

module.exports = nextConfig

3. 重启开发服务后测试工具栏功能。

注意：关闭StrictMode会丢失React开发环境下的额外校验，建议仅作为临时过渡方案，后续关注组件官方更新。

方案2：用patch-package打补丁修复 #

若不想关闭StrictMode，可通过补丁工具修复组件内部的状态逻辑问题：

1. 安装依赖：

npm install patch-package --save-dev
# yarn用户执行：yarn add patch-package postinstall-postinstall --dev

2. 找到node_modules/react-draft-wysiwyg中涉及弹窗状态的文件（如lib/components/toolbar/Toolbar.js），参考社区修复思路调整代码（比如避免双重渲染导致的状态重置）。
3. 生成补丁：

npx patch-package react-draft-wysiwyg

4. 在package.json中添加脚本，确保依赖安装后自动应用补丁：

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

方案3：调整依赖版本 #

尝试切换react-draft-wysiwyg的版本，找到适配Next.js 14和React 18的稳定版本：

• 升级到最新版本（含beta版），查看官方是否已修复该兼容性问题
• 降级到社区反馈适配React 18的旧版本（如v1.15.0，需自行测试业务兼容性）

内容的提问来源于stack exchange，提问作者William Gabriel