“ReactPlayer”不能用作 JSX 组件

Question

我尝试在我的 React 项目中使用react-player。我正在使用打字稿。我在构建时收到以下错误：

“ReactPlayer”不能用作 JSX 组件。 其实例类型“ReactPlayer”不是有效的 JSX 元素。 “render()”返回的类型在这些类型之间不兼容。 类型“ReactNode”不可分配给类型“false”|元素|无效的'。 类型“未定义”不可分配给类型“假”|元素|无效的'。 我怀疑这是 ReactPlayer 特有的。我可能错误配置了该项目。有什么帮助吗？

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "home-exercise",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.67",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.8",
    "flexbox-react": "^4.4.0",
    "moment": "^2.29.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-player": "^2.6.2",
    "react-scripts": "3.4.3",
    "typescript": "^3.7.5"
  },

Answer 1

我根据库中的示例创建了一个工作示例。我插入了您的

tsconfig

，一切似乎都正常。尝试将您的项目与那个项目进行比较。

import * as React from "react";
import ReactPlayer from "react-player";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
    </div>
  );
}

旁注；我非常有兴趣看到您对

import

的

ReactPlayer

声明。该错误表明您没有导入您认为正在导入的内容。

Answer 2

就我而言，我在package.json上升级了@types/react和“@types/react-dom”，现在我使用@types/react版本18.2.78和@types/react-dom版本18.2 .25并且工作正常:

"@types/react": "^18.2.78",
"@types/react-dom": "^18.2.25",

祝你好运