ReacPlayer error in Nextjs with typescript

[MTheusRodrigues]

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

1. npx create-next-app@latest --ts
2. npm install react-player

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()
} } />

[marcello-palmitessa]

I have the same issue on Next.js. This happened suddenly from yesterday...

[rookbreezy]

Temporary fix: set the ReactPlayer component type to React.FC<ReactPlayerProps>

[marcello-palmitessa]

@coding-cucumber please can you write an example of usage with React.FC ?

[hbittar]

@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>;

[aviggiano]

I have the same issue

[aceslick911]

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" />

[kazuemon]

(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/[email protected]":
  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.

[red-game-dev]

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 🙌

[luwes]

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?