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.