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"
},
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With