“ReactPlayer”不能用作 JSX 组件

jac*_*ie1 6 typescript reactjs create-react-app

我尝试在我的 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"
  ]
}
Run Code Online (Sandbox Code Playgroud)

包.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"
  },
Run Code Online (Sandbox Code Playgroud)

jac*_*son 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>
  );
}
Run Code Online (Sandbox Code Playgroud)

边注; 我很有兴趣看到你的import声明ReactPlayer。该错误表明您没有导入您认为正在导入的内容。

  • 您是如何找出导致此问题的依赖项的? (2认同)