CODEWITHSUNDEEP
reactjstypescriptcreate-react-app
jackie1
jackie1

Reputation: 71

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

Upvotes: 7

Views: 5236

Answers (3)

Baris Taskiran
Baris Taskiran

Reputation: 148

For me it was resolved by updating both React and ReactDOM along with their type defs to the latest versions:

npm install react@latest react-dom@latest

npm install @types/react@latest @types/react-dom@latest

Upvotes: 0

Zakariae BEN ALLAL
Zakariae BEN ALLAL

Reputation: 92

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

Upvotes: 0

jack.benson
jack.benson

Reputation: 2363

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.

Upvotes: 1

Related Questions