我有一个无法编译的 React Typescript 应用程序。许多组件都有一个 render 方法，该方法被类型化为返回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作为开发依赖项安装
。其他可能相关的信息：
- 这个项目直到几天前才编译，编译开始失败时没有代码更改，所以我怀疑包更新触发了这个(即使这不是根本原因)。编译开始失败时，在时间窗口中更新的唯一依赖项是
@types/react和@types/react-dom。但是，将这些包回滚到旧版本并不能解决问题。 - 将我的组件呈现方法更改为返回
JSX.Element会消除编译器错误，但应用程序中存在无法执行此操作的第三方组件。
我有一个解决方案，似乎 18.0.1 类型定义中有大量重大更改。
像你一样，我无法通过回滚到早期版本来解决它，但调查让我发现这是因为"react-router"等引入了"18.0.1"版本。
为了解决这个问题，我将以下内容添加到我的包中.json
"resolutions": {
"@types/react": "17.0.14",
"@types/react-dom": "17.0.14"
},
然后我清除了我的节点模块和我的包缓存，然后重新运行 yarn 来拉取新的包。
分辨率部分用于纱线(我使用)。 我认为如果您使用的是 NPM，您可以使用"覆盖"而不是"分辨率"。
npm 版本应>= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
并在 npm i 之前删除 package-lock.json。
错误 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版本不同。
此视频演示如何在您自己的项目中检查应用的@types/react版本。
返回children时可能会发生这种情况：
export const Component = ({ children }) => {
//...do stuff
return children
}
要修复，请包装一个片段：
return <>{children}</>
我相信这是因为children可能是一个元素数组，我们只允许返回一个元素。此类错误的通常消息是：
JSX expressions must have one parent element.
此问题在 @types/react 版本中出现不匹配 TS2786
使用 npm 重复数据删除或纱线重复数据删除修复它
从 0.66.3 更新 React 原生到 0.70.6 后，我遇到了同样的问题。我通过更改包中的"分辨率"解决了问题.json
"resolutions": {
// "@types/react": "^17" remove this
"@types/react": "^18.0.8" //adding this
},
// After Change remove node_modules
// run npm i OR yarn
如果有yarn用户四处游荡;最近在进行 react/react-native 版本升级后遇到了这个问题;只需删除现有的yarn.lock文件和node_modules文件夹并再次运行yarn install对我有用。 :)
上面的答案都没有解决我遇到相同打字稿错误 TS2786
我如何让它工作是更新 tsconfig.json
从
{
"compilerOptions": {
"preserveSymlinks": true,
...
自
{
"compilerOptions": {
"preserveSymlinks": false,
...
或者只是简单地删除它
我通过将tsconfig.json中的''jsx: 'react'更改为jsx：react-jsx
问题是因为react-routev18 不支持react-virtualized，应该降级。
因此，简单的方法是降级您的路线，如下所示：
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"
然后，你的应用应该可以正常工作。
只需在package.json中添加最新版本的react和react-dom，然后运行以下命令重新安装act和react-dom
在这里，在发布这个答案时，最新版本的 react 和 react-dom 是 18。
步骤-
- 删除 proect 的package-lock.json文件
- 打开项目的package.json。
- 替换 react 和 react-dom 版本
"@types/react": "^18", "@types/react-dom": "^18"
4.运行命令
npm install --save-dev @types/react @types/react-dom
做。它解决了我的问题。
我遇到了关于此错误的相同问题。我将以下代码添加到我的package.json文件中并得到了解决。
"resolutions": {
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2",
"graphql": "^16.5.0"
},
修复子组件的 RETURN 语句后，我的一个得到了解决
我在那里：
return; <form></form>
改为：
return (<form></form>)
如果您之前有 react 17 的解决方案：
"resolutions": {
"@types/react": "^17.0.0"
},
它会在包锁/纱线锁中生成一个条目，更新时不会删除该条目。因此，您需要删除此分辨率和纱线锁定条目。 它看起来像这样：
"@types/react@*", "@types/react@17.0.21", "@types/react@^17":
version "17.0.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"
integrity something
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
删除两者并再次运行安装应该可以解决您的问题
如果您没有添加@types/反应，请先通过以下方式添加：
yarn add --dev @types/react
我将介绍 react-native 项目。 所有这些答案都没有帮助我。 但我在我的项目中发现了这个问题的原因。 我忘了在tsconfig.json中填写"types"参数。
添加
"types": ["react-native", "jest"]
帮助了我。 干杯！