Warnings with React 18

[dhruvin25799]

Current Behavior

Getting infinite warnings could not call getDuration, getCurrentTime, getVideoLoadedFraction on React 18.
This is only happening when React 18 with createRoot is used.
The app works fine, the video works fine only these infinite warnings are the issue.

Expected Behavior

Shouldn't have any warnings or any function calls.

Steps to Reproduce

1. Codesandbox Link : https://codesandbox.io/s/snowy-field-u9fugp?file=/src/App.js

Environment

• React 18 with createRoot

[cookpete]

It looks like some change in React 18 is messing up the callPlayer util. If I console.log(this.player) in the util I get this output:

Notice the target iframe changes from widget2 (correct) to widget4 (which doesn’t exist).

Looking back, the implementation of callPlayer is strange and probably very brittle.

[cookpete]

Looks like this issue also stops happening if you remove <StrictMode>

[juanfraherrero]

Looks like this issue also stops happening if you remove <StrictMode>

Sorry, from where i should remove <StrictMode>?

[wimpykatana]

Looks like this issue also stops happening if you remove <StrictMode>

Sorry, from where i should remove <StrictMode>?

You can find it inside index.js

[cookpete]

Looks like this is fixed in React 18.1

[chochihim]

@cookpete I am using React 18.1 but still getting these infinite warnings. FYI I am also using Next.js 12.1.6

[cookpete]

Yep you’re right, sorry. I was confused with a different issue.

[manishsharma004]

There seems to be an issue with double loading of Youtube api, which overrides the Youtube.player value.

Only first YT.Player instance get the updates recieved from iframe messages for update apiInterface that adds the getDuration, getCurrentTime etc. methods. Stopping the multiple load for a url solves the issue. @cookpete added a PR which may or may not be an ideal solution to issue.

[lehnerpat]

As a temporary workaround, you can use the patch below to apply @manishsharma004's changes from #1450 to your locally-installed NPM package. (Note: This patch is not exactly the same as the PR itself, because it applies to the compiled files, not the source files!)

How to apply the fix manually / one-time:

• Save the patchfile contents below to a file Player.js.patch (note: filename and location don't matter, but I'll use this as an example)
• In your project, run patch -i Player.js.patch node_modules/react-player/lib/Player.js (if your Player.js.patch file is located somewhere else, use the right path here)

How to apply this fix with a postinstall script (useful if your project is built by a CI server or you collaborate with other people):

• Save the patchfile contents below to a file Player.js.patch and check it into your repo
• in your package.json, add a "postinstall" script:

  ". . .",
  "scripts": {
    ". . .",
    "postinstall": "patch -i Player.js.patch node_modules/react-player/lib/Player.js -N || true"
  },
  ". . .",

• adjust the path of the patch file as needed
• Note: the -N argument and the || true make sure that the postinstall script doesn't fail if the patch is already applied (i.e. if npm install/yarn install is being run when react-player is already installed)
• Be sure to remove this again when a fixed version of react-player is released and you update to it :)

---

--- node_modules/react-player/lib/Player.js	2022-05-07 18:04:18.000000000 +0200
+++ node_modules/react-player/lib/Player.js	2022-05-07 18:04:01.000000000 +0200
@@ -82,7 +82,10 @@
     _defineProperty(_assertThisInitialized(_this), "handlePlayerMount", function (player) {
       _this.player = player;

-      _this.player.load(_this.props.url);
+      if (!_this.loaded?.[_this.props.url]) {
+        _this.player.load(_this.props.url);
+        _this.loaded = { [_this.props.url]: true };
+      }

       _this.progress();
     });
@@ -288,7 +291,10 @@
         this.isLoading = true;
         this.startOnPlay = true;
         this.onDurationCalled = false;
-        this.player.load(url, this.isReady);
+        if (!this.loaded?.[url]) {
+          this.player.load(url, this.isReady)
+          this.loaded = { [url]: true }
+        }
       }

       if (!prevProps.playing && playing && !this.isPlaying) {

[manishsharma004]

Thanks @lehnerpat for the detailed guide on patch, however I wouldn't recommend patching your production code with a changes from someone who isn't a developer on the project(me) until it gets reviewed by project developers. So, I would suggest patching only if there's no other way.

[lehnerpat]

Yup, absolutely valid point! I just needed a workaround for the time being and built it so I thought I'd share :)

…

On 7. May 2022, at 19:48, manishsharma004 ***@***.***> wrote:  Thanks @lehnerpat for the detailed guide on patch, however I wouldn't recommend patching your production code with a changes from someone who isn't a developer on the project(me) until it gets reviewed by project developers. So, I would suggest patching only if there's no other way. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[cookpete]

This should now be fixed, as of 2.10.1