typescript TS2786“组件”不能用作JSX组件

cu6pst1q  于 2022-11-18  发布在  TypeScript
关注(0)|答案(7)|浏览(1512)

我有一个无法编译的React Typescript应用程序。许多组件都有一个类型化为返回React.ReactNodeReact.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可消除编译器错误,但应用程序中存在第三方组件,这是不可能的。

sxissh06

sxissh061#

我有一个解决方案,似乎在18.0.1类型定义中有大量的突破性更改。
像你一样,我不能通过回滚到早期版本来解决它,但调查让我发现这是因为“React路由器”等带来了“18.0.1”版本。
为了解决这个问题,我在我的package.json中添加了以下内容

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

然后,我清除了我的节点模块和包缓存,然后重新运行Yarn以提取新的包。
分辨率部分是针对Yarn的(我使用的)。我认为如果你使用NPM,你可以使用“覆盖”而不是“分辨率”。
npm版本应〉= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
并删除npmi之前的package-lock.json。

ki1q1bka

ki1q1bka2#

错误TS2786通常来自@types/react中的不匹配。

如果您有依赖于@types/react特定版本(即v17.0.47)的库,并且您有其他库使用不同的@types/react主版本(即v18.0.14),则在使用React.ReactNodeJSX.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版本不同。

t98cgbkg

t98cgbkg3#

返回children时可能会发生这种情况:

export const Component = ({ children }) => {
    //...do stuff
    return children
}

若要修复,请在片段中 Package :

return <>{children}</>

我相信这是因为children可能是一个元素数组,我们只允许返回一个元素。
JSX expressions must have one parent element.

i7uaboj4

i7uaboj44#

此问题与@types/react版本TS 2786中的不匹配有关
使用npm dedupeyarn dedupe进行修复

w8ntj3qf

w8ntj3qf5#

问题是因为react-route v18不支持react-virtualized,应该将其降级。
因此,简单的方法是降级您的路线如下:

"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"

然后,您的应用程序应该可以正常工作。

slwdgvem

slwdgvem6#

只需在package.json中添加最新版本的react和react-dom,然后运行以下命令即可重新安装react和react-dom
在这里,虽然张贴这个答案,最新版本的React和React的dom是18。
步骤-
1.删除项目中的package-lock.json文件
1.打开项目的package.json
1.替换react和react-dom版本

"@types/react": "^18",

"@types/react-dom": "^18"

4.执行指令
npm安装--保存-dev @类型/React@类型/React域
搞定了,解决了我的问题.

ryevplcw

ryevplcw7#

如果有yarn用户在附近徘徊;最近升级react/react-native版本后遇到此问题的用户;只是删除现有的yarn.lock文件和node_modules文件夹,并再次运行yarn install是什么为我工作。:)

相关问题