CKEditor无法作为JSX组件使用的TypeScript报错求助

'CKEditor' 无法作为JSX组件使用。
其实例类型 'CKEditor' 不是有效的JSX元素。
这些类型之间的render()方法返回类型不兼容。
类型 'React.ReactNode' 无法赋值给类型 'import("/home/mihail/webdev/work/OUTRUNSOLUTION/lab_monorepo/admin/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'。
类型 'ReactElement<any, string | JSXElementConstructor>' 无法赋值给类型 'ReactNode'。
类型 'ReactElement<any, string | JSXElementConstructor>' 缺少类型 'ReactPortal' 中必需的属性'children'。ts(2786)

解决办法 #

• 统一React类型版本：该错误大多源于项目中存在多版本@types/react导致的类型冲突。检查锁文件后，执行命令统一依赖版本：

  # npm 用户
  npm install @types/react@latest @types/react-dom@latest --save-dev
  # yarn 用户
  yarn add @types/react@latest @types/react-dom@latest --dev
  

  若为monorepo项目，在根目录package.json中添加强制统一配置：

  // npm 用 overrides
  "overrides": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
  // yarn 用 resolutions
  "resolutions": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
  

• 匹配CKEditor与React版本：确保@ckeditor/ckeditor5-react版本和当前React版本兼容，执行命令升级或降级CKEditor包：

  npm install @ckeditor/ckeditor5-react@latest --save
  

• 清除缓存重构建：清理旧依赖与缓存后重新安装构建：

  rm -rf node_modules package-lock.json
  npm install
  npm run build
  

内容的提问来源于stack exchange，提问作者Mihail OLARU