Open MTheusRodrigues opened 2 years ago
I have the same issue on Next.js. This happened suddenly from yesterday...
Temporary fix: set the ReactPlayer component type to React.FC<ReactPlayerProps>
@coding-cucumber please can you write an example of usage with React.FC ?
@coding-cucumber @marcello-palmitessa this works for me
import {default as _ReactPlayer} from 'react-player';
import {ReactPlayerProps} from "react-player/types/lib";
const ReactPlayer = _ReactPlayer as unknown as React.FC<ReactPlayerProps>;
I have the same issue
Thanks hbittar! worked for me
import _ReactPlayer, { ReactPlayerProps } from 'react-player';
const ReactPlayer = _ReactPlayer as unknown as React.FC<ReactPlayerProps>;
<ReactPlayer url={receivedBlobUrl} playing controls width="500px" height="300px" />
(Using DeepL translator 🙏)
This may be caused by the React version that @types/react in another package depends on being different from the one you have installed.
In my case, I am mainly using React 17 ( "@types/react": "17.0.38" ) , but @types/hoist-non-react-statics ( which react-beautiful-dnd depends on ) specifies @types/react@* as a dependency ( resolve as "@types/react": "18.0.15" ), so there are two different versions of @types/react in one project, and I think they conflict due to loading order and other reasons.
👇 my yarn.lock
"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/react@*":
version "18.0.15"
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@17.0.38":
version "17.0.38"
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
Although another problem may occur, a temporary workaround is to specify an empty array for types in tsconfig.json to prevent the error from occurring.
👇 tsconfig.json
{
"compilerOptions": {
"types": []
}
}
I will update again if I find a better solution.
Any ETA when this issue will be completely fixed from the author? I've implemented the solution and can confirm the above works well, cheers to everyone, but would be cool to have this sorted 🙌
I can't reproduce this on my end https://codesandbox.io/p/devbox/react-player-ts-rdlt99?file=%2Fapp%2Fpage.tsx%3A14%2C1
please provide a reproduction if this is still an issue?
@kazuemon I believe is right, that's causing this issue.
try setting @types/react
to a fixed version with NPM overrides
or yarn resolutions
. does it fix it?
Current Behavior
The 'ReactPlayer' module cannot be used as a JSX component. Your instance type 'ReactPlayer' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' cannot be assigned to type 'import("C:/.../node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' cannot be assigned to type 'ReactNode'.
Steps to Reproduce
import ReactPlayer from 'react-player';
<ReactPlayer ref={playerRef} url={urlText} playing={isPlaying} controls={false} width='5rem' height='5rem' volume={volume} muted={muted} onDuration={(duration)=>{ const time = new Date(duration 1000) .toISOString().substr(14, 5) setDuration(time) }} onProgress={(progress) => { const timeProgress = new Date(progress.playedSeconds 1000) .toISOString().substr(14, 5) setTimeProgress(timeProgress) setPosition(progress.played) }} onEnded={() => { togglePlayPause()
} } />