With Next.js using React 18, I cannot play the video from the onReady.

[es-ki]

Current Behavior

When I try to play a video in onReady, the video does not play.
In addition, the following message is displayed on the console.

react_devtools_backend.js:3973 ReactPlayer: YouTube player could not call getCurrentTime – The method was not available

Expected Behavior

Play the video as soon as it is ready to be played.

Steps to Reproduce

1. Clone this repository.
2. yarn
3. yarn dev
4. Enter the YouTube video URL in the text form.

Environment

• URL attempting to play: https://www.youtube.com/watch?v=E8c83bpOVXo
• Browser: Google Chrome 99.0.4844.84
• Operating system: Windows 10
• jsFiddle example: https://github.com/Sakaki-Ya/test

Other Information

It worked if I did not use Next.js.
CodeSandBox

[joaoD3V]

It's same here. Yesterday, I upgrade Next 11 to Next 12 and React 17 to React 18. In old version of these two libraries don't occur loop of warnings. I guess is related to issue #377

[cookpete]

Should be fixed in react@18.1.0 and react-dom@18.1.0

[es-ki]

@cookpete
Thanks for confirming this issue.

I tried it on react@18.1.0 and react-dom@18.1.0 but did not see any improvement.
The repository is as follows.
https://github.com/Sakaki-Ya/test.git

[bciach]

Any update on this issue? it doesnt work in next 13/14 and react18 @cookpete

@es-ki @joaoD3V have you managed to solve this issue?

[joaoD3V]

In Next 13, I implemented React Player in Player.tsx component and used dynamic import to import this component inside 'use client' component. It's working fine for me @bciach