TS2786‘组件’不能用作JSX组件
我有一个不编译的React类型记录应用程序。许多组件都有一个类型为返回React.ReactNode或React.ReactElement的呈现方法。在编译时，报告了许多与以下类似的错误：
TS2786: 'MessagesWidget' cannot be used as a JSX component.
Its instance type 'MessagesWidget' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index").ReactNode'.为什么编译器期望由与ReactNode捆绑的类型定义的react-calendar？我确实将@types/react-dom安装为一个dev依赖项。
其他可能相关的信息：
- 这个项目直到几天前才开始编译，编译开始失败时没有发生任何代码更改，所以我怀疑包更新触发了这一点(即使这不是根本原因)。编译开始失败时在时间窗口中更新的唯一依赖项是
@types/react和@types/react-dom。然而，将这些包滚回旧版本并没有解决这个问题。 - 更改组件呈现方法以返回
JSX.Element将删除编译器错误，但是应用程序中存在第三方组件，这是不可能的。
Stack Overflow用户
发布于 2022-06-22 11:33:40
误差TS2786通常来自于@types/react中的不匹配。
当您的库依赖于特定版本的@types/react (即v17.0.47)和其他库使用不同的主要版本的@types/react (即v18.0.14)时，这可能会导致在使用React.ReactNode或JSX.Element时出现兼容性问题。类型JSX.Element通常由React函数组件返回。
您可以通过简化对@types/react的依赖来解决这个问题，这样它们就可以遵循相同的主要版本。您可以通过执行@types/react (当有package-lock.json文件时)或yarn why @types/react (当存在yarn.lock文件时)来查找项目中依赖于package-lock.json的所有库。
在您的具体案例中，似乎存在从@types/react-calendar到@types/react的依赖关系。您的问题似乎是使用不同版本的@types/react在项目中存在其他依赖项。也许您甚至直接依赖于@types/react，其中确切的版本号与@types/react-calendar所需的@types/react版本不同。
https://stackoverflow.com/questions/71831601
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号