我有一个无法编译的React Typescript应用程序。许多组件都有一个类型化为返回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'.
为什么编译器需要react-calendar
捆绑的类型定义的ReactNode
?我确实安装了@types/react-dom
作为dev依赖项。
其他可能相关的信息:
1.这个项目直到几天前才开始编译,并且在编译开始失败时没有任何代码更改,所以我怀疑是包更新触发了这个问题(即使这不是根本原因)。在编译开始失败的时间窗口中更新的依赖项只有@types/react
和@types/react-dom
。将这些包回滚到旧版本并不能解决问题,但这并不重要。
1.将组件的呈现方法更改为返回JSX.Element
可消除编译器错误,但应用程序中存在第三方组件,这是不可能的。
7条答案
按热度按时间sxissh061#
我有一个解决方案,似乎在18.0.1类型定义中有大量的突破性更改。
像你一样,我不能通过回滚到早期版本来解决它,但调查让我发现这是因为“React路由器”等带来了“18.0.1”版本。
为了解决这个问题,我在我的package.json中添加了以下内容
然后,我清除了我的节点模块和包缓存,然后重新运行Yarn以提取新的包。
分辨率部分是针对Yarn的(我使用的)。我认为如果你使用NPM,你可以使用“覆盖”而不是“分辨率”。
npm版本应〉= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
并删除npmi之前的package-lock.json。
ki1q1bka2#
错误TS2786通常来自
@types/react
中的不匹配。如果您有依赖于
@types/react
特定版本(即v17.0.47)的库,并且您有其他库使用不同的@types/react
主版本(即v18.0.14),则在使用React.ReactNode
或JSX.Element
时可能会导致兼容性问题。类型JSX.Element
通常由React函数组件返回。您可以通过简化对
@types/react
的依赖关系来解决这个问题,使它们遵循相同的主版本。您可以通过执行npm explain @types/react
(当存在package-lock.json
文件时)或yarn why @types/react
(当存在yarn.lock
文件时)来查找项目中所有依赖于@types/react
的库。在您的特定情况下,似乎存在从
@types/react-calendar
到@types/react
的依赖项。您的问题似乎是项目中存在使用不同版本的@types/react
的其他依赖项。可能您甚至对@types/react
存在直接依赖项,其中确切的版本号与@types/react-calendar
所需的@types/react
版本不同。t98cgbkg3#
返回
children
时可能会发生这种情况:若要修复,请在片段中 Package :
我相信这是因为
children
可能是一个元素数组,我们只允许返回一个元素。JSX expressions must have one parent element.
i7uaboj44#
此问题与@types/react版本TS 2786中的不匹配有关
使用npm dedupe或yarn dedupe进行修复
w8ntj3qf5#
问题是因为
react-route
v18不支持react-virtualized
,应该将其降级。因此,简单的方法是降级您的路线如下:
然后,您的应用程序应该可以正常工作。
slwdgvem6#
只需在package.json中添加最新版本的react和react-dom,然后运行以下命令即可重新安装react和react-dom
在这里,虽然张贴这个答案,最新版本的React和React的dom是18。
步骤-
1.删除项目中的package-lock.json文件
1.打开项目的package.json。
1.替换react和react-dom版本
4.执行指令
npm安装--保存-dev @类型/React@类型/React域
搞定了,解决了我的问题.
ryevplcw7#
如果有
yarn
用户在附近徘徊;最近升级react/react-native版本后遇到此问题的用户;只是删除现有的yarn.lock
文件和node_modules
文件夹,并再次运行yarn install
是什么为我工作。:)