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

Question

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

'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 文件之间的类型正确匹配似乎存在问题。有人对如何解决这些类型错误有任何想法吗？

Answer 1

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

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

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

UPD：只是有点详细的答案：

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

即使您在package.json（没有^）父包中指定了一些严格版本，也可能会安装您已经用于其自身目的的包的重复版本。

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

Answer 2

您将需要修复@types/react包的版本，因为许多 React 库的依赖项设置为@types/react : "*"，这将采用最新版本的包。（我想他们刚刚发布了版本 18）

为此，您可以将其添加到 package.json 中

"resolutions": {
  "@types/react": "^17.0.38"
}

它可以很好地与yarn配合使用，但如果您使用npm，那么您还需要将其添加到package.json的“scripts”部分中

"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

这将简单地使用npm-force-resolutions包来修复分辨率中的版本。

完成后npm install，您的应用程序应该可以正常工作。

Answer 3

与样式组件一起使用。分辨率对我不起作用，所以这是另一个解决方案：

蛮力式铸造：

const ThemeProviderFixed = ThemeProvider as unknown as React.FC<PropsWithChildren<{ theme: string }>>;

Answer 4

我最近在 Yarn monorepo 中遇到了这个问题，其中 Typescript create-react-app 子项目有installConfig.hoistingLimits=workspace. 此配置可防止将依赖项提升到 monorepo 的顶层。

运行时react-scripts start，类型检查器仍在查看顶层@types，没有找到@types/react与项目上配置的 React 版本匹配的内容。解决该问题的修复是将以下内容添加到tsconfig.json子项目中：

"compilerOptions": {
  ...
  "typeRoots": ["./node_modules/@types"]
},
...

这会将 Typescript 指向为特定子项目安装的类型定义。

Answer 5

我知道今天发布

rm -rf node_modules
rm -rf yarn.lock
npm install

刚刚使用 npm install 解决了问题，但我不知道发生了什么

Answer 6

Sahil 的答案对于npm 和yarn 是正确的，但如果您使用pnpm，则需要在package.json文件中进行稍微不同的设置：

"pnpm": {
  "overrides": {
    "@types/react": "^17.0.38"
  }
}

如果您使用带有多个包的单一存储库，则这只适用于package.json存储库的根文件。您可以在 pnpm 文档中阅读更多相关信息。

Answer 7

我也遇到了同样的问题，所以我更新了npm版本^6.0.0 -> 8.0.0并解决了。

检查 npm 版本。

Answer 8

我最近在升级到 React 18 时遇到了这个问题，并且忘记升级 devDependency 中相应的类型。

对我有用的是升级 React 类型以匹配 package.json 文件，如图所示

{
    ...
    "dependencies": {
        ...
        "react": "^18.1.0",
    },
    "devDependencies": {
        ...
        "@types/react": "^18.0.8",
    }
}