Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'ReactPlayer' cannot be used as a JSX component

I attempt to use react-player for my React project. I'm using Typescript. I received the following error when I build it:

'ReactPlayer' cannot be used as a JSX component. Its instance type 'ReactPlayer' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'ReactNode' is not assignable to type 'false | Element | null'. Type 'undefined' is not assignable to type 'false | Element | null'. I suspect it is a specific to ReactPlayer. I probably mis-configure the project. Any help?

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"
  },
like image 209
jackie1 Avatar asked Aug 16 '26 04:08

jackie1


1 Answers

I created a working example based upon the examples from the library. I plugged in your tsconfig and everything appears to work. Try comparing your project to that one.

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>
  );
}

Side note; I'd be very interested to see your import statement for ReactPlayer. The error indicates you are not importing the thing you believe you are importing.

like image 181
jack.benson Avatar answered Aug 17 '26 17:08

jack.benson