'ReactPlayer' cannot be used as a JSX component

Question

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"
  },

Jurkoic

Showing us the ReactPlayer would be a good start. – Food

Answer 1

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.

Glaciology

My import statement was "import ReactPlayer from 'react-player';". The project was bootstrapped by "npx create-react-app" – Jurkoic

I can reproduce it by the following: 1. npx create-react-app demo --template typescript 2. yarn add react-player 3. use ReactPlayer. This time, the error is ``` 'ReactPlayer' cannot be used as a JSX component. Its instance type 'ReactPlayer' is not a valid JSX element. Type 'ReactPlayer' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more. ``` – Jurkoic

I don't know what version of CRA you are using, but I just ran those commands and everything works with v4.0.0. I used npm instead of yarn, though I find it unlikely that is what is causing the issue. Going to need more information. – Glaciology

It turned out that removing "flexbox-react": "^4.4.0" fixes the issue. It looks like flexbox-react uses different version of react types which confuses typescript. – Jurkoic

thanks @jackie1, i just spent 5 hours trying to figure out what was wrong with my code... turns out a child dependency of one my packages was using a different version of react types, which also solved the issue for me... wish I could give you an accepted answer – Havstad

How did you figure out which dependency was causing this? – Fantinlatour

Answer 2

For my case, i upgrade @types/react and "@types/react-dom" on package.json, now i'm using @types/react version 18.2.78 and @types/react-dom version 18.2.25 and it's working fine :

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

Good luck

Jarredjarrell