集成react-draft-wysiwyg后NextJS项目构建失败求助

问题根源 #

这个错误是由于项目中存在多个版本的@types/react导致的类型冲突。从错误信息可以看到，@types/react-transition-group依赖了一个旧版本的@types/react，和你项目根版本的React类型不兼容，进而引发组件类型不匹配问题。

解决方案 #

方案1：统一@types/react版本（推荐） #

通过包管理器强制所有依赖使用同一个版本的@types/react：

npm用户

在package.json中添加overrides字段：

{
  "overrides": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
}

替换成你项目中实际使用的React版本号，然后执行：

npm install

Yarn用户

在package.json中添加resolutions字段：

{
  "resolutions": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
}

然后执行：

yarn install

方案2：调整动态导入的类型断言 #

如果统一版本后仍有问题，可修改动态导入代码，添加类型断言解决类型不匹配：

import dynamic from 'next/dynamic'
import type { EditorProps } from 'react-draft-wysiwyg'

const ReactDraftWysiwyg = dynamic(() => 
  import('react-draft-wysiwyg').then((mod) => mod.Editor as React.ComponentType<EditorProps>), 
  { ssr: false }
)

export default ReactDraftWysiwyg

方案3：封装独立组件 #

创建单独的编辑器组件文件（比如DraftEditor.tsx）：

// components/DraftEditor.tsx
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

export default Editor

然后在需要的地方动态导入该组件：

import dynamic from 'next/dynamic'

const DraftEditor = dynamic(() => import('../components/DraftEditor'), { ssr: false })

// 使用组件
<DraftEditor /* 传入你的props */ />

验证修复 #

执行构建命令确认错误消失：

npm run build

内容的提问来源于stack exchange，提问作者Aleksandr Chernyi