NPM 包无法用作 JSX 组件 - 类型错误

我在某些软件包的打字稿项目中遇到了这些奇怪的类型错误。 前任：

'TimeAgo' cannot be used as a JSX component.
  Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{}>>' 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/user/app/node_modules/@types/react-bootstrap-table-next/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

我在本地 Windows 计算机上没有遇到这些类型错误，但它们在我的 Linux 虚拟机中不断发生。我已经多次删除该项目，克隆我的存储库并在不同版本的节点中再次安装软件包，但仍然遇到相同类型的错误。

已检查节点12.18.3、16.13.1

以下是一些快速包 json 信息：

"react-timeago": "^6.2.1",
"react-custom-scrollbars": "^4.2.1",
"react-custom-scrollbars-2": "^4.4.0",
"react": "^17.0.2",
"next": "^12.1.1",
"@types/react-custom-scrollbars": "^4.0.10",
"@types/react-timeago": "^4.1.3",
"@types/react": "^17.0.44",
"typescript": "^4.3.5"
"@types/node": "^14.18.12",

这发生在基本的自定义组件上：

MyTst.tsx
import TimeAgo from "react-timeago";

const Mytst = () => {
  return (
    <div>
      <TimeAgo date={"02/02/2022"} />
    </div>
  );
};

export default Mytst;

我也收到了 react-custom-scrollbars-2 的错误。包含组件的库和与其关联的 @types 文件之间的类型正确匹配似乎存在问题。有人对如何解决这些类型错误有任何想法吗？

有同样的问题。 只需添加这个

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

to package.json文件并运行yarn命令。

UPD:稍微详细一点的答案：

@types/react-dom有它自己的依赖关系，其中之一是@types/react版本设置为'*'- 一个主要版本，现在可能指的是18.

即使您在文件中指定了一些严格的版本package.json（没有^) 父包可能会安装您已出于其自身目的而使用的包的自己的副本。

通过使用resolutions我们对依赖项的依赖项指定了严格的限制。