TS2786‘组件’不能用作JSX组件

Question

我有一个不编译的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依赖项。

其他可能相关的信息：

1. 这个项目直到几天前才开始编译，编译开始失败时没有发生任何代码更改，所以我怀疑包更新触发了这一点(即使这不是根本原因)。编译开始失败时在时间窗口中更新的唯一依赖项是@types/react和@types/react-dom。然而，将这些包滚回旧版本并没有解决这个问题。
2. 更改组件呈现方法以返回JSX.Element将删除编译器错误，但是应用程序中存在第三方组件，这是不可能的。

Answer 1

我有一个解决方案，似乎在18.0.1类型的定义中有大量的改变。

和你一样，我无法通过回到早期的版本来解决这个问题，但是调查让我发现，这是因为“react路由器”和其他人一起引入了“18.0.1”版本。

为了解决这个问题，我在我的package.json中添加了以下内容

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

然后我清除了我的节点模块，我的包缓存，然后重新运行纱线来提取新的包。

决议部分是关于纱线的(我用的)。我认为如果你使用的是NPM，你可以使用“重写”而不是“决心”。

npm版本应>= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

并在npm之前删除package-lock.json。

Answer 2

误差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版本不同。

Answer 3

这可能在返回children时发生。

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

若要修复，请将其包装在一个片段中：

return <>{children}</>

我相信这是因为children可能是一个元素数组，我们只能返回一个元素。此类错误通常的消息是：

JSX expressions must have one parent element.