Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Handling component unmounting before player is ready

See original GitHub issue

Within my single page app a user can navigate between views that may or may not contain videos. When loading a view with a video (with react-player) and switching to a non-video view before the player has finished loading we see this error:

Uncaught Error: The YouTube player is not attached to the DOM.
    at Y.h.B (www-widgetapi.js:100)

We do have a callback registered to onProgress={onVideoProgress}

This clearly comes from the Youtube API, but I’m wondering if there is a hook from react-player that I can use to destroy the player on componentWillUnmount to avoid this console error?

Similar issues like (#20) didn’t seem to apply in this case.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

cookpetecommented, Jan 23, 2019

I’m sure this is very annoying, but I have already described the how the library already is trying to avoid this error. If it is still happening, I cannot fix it unless I can consistently reproduce it. If anyone can give instructions on how to reliably cause this error, I will take a look when I get some time.

If you quickly move away from the page before the video loads, this error is thrown

I have attempted this but I cannot get the error to occur. The steps to reproduce are not specific enough.

1reaction

greggbcommented, Jan 12, 2019

I ended up just grabbing a reference to the YouTube instance and destroying it in CWUm.

We were able to repro fairly consistently between two routes with react-router, but it could have been any number of other side effects causing the issue.

@hassaans I’d recommend manually destroying the instance to see if that helps.

Top Results From Across the Web

Handling component unmounting before player is ready #531

Within my single page app a user can navigate between views that may or may not contain videos. When loading a view with...

How to use componentWillUnmount with Functional ...

To understand how we can use componentWillUnmount, first we need to look at how the component manages mounting with useEffect. ... If we...

React - animate mount and unmount of a single component

I want something that's easy to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of...

Handling async React component effects after unmount

Four strategies for ensuring that React components don't update state after they've been unmounted.

React and Video.js

These are several React and Video.js player implementations and examples. ... Dispose the Video.js player when the functional component unmounts React.