Video.js: dispose() gives error: Cannot read property 'classList' of null

[DimaM-BeStreet]

Description

Hey guys, I've been going crazy for a full day over this bug, thinking i must be missing something (i still might be)
basically I get an error every time I use dispose, including this super simple reduced case:
https://codepen.io/dimam-bestreet/pen/GPmoxX

Steps to reproduce

1. add dynamically a video
2. run .dispose on it
3. look in the chrome (Chromium 65) dev-tools for this error:
   VM76237:214 Uncaught TypeError: Cannot read property 'classList' of null
   at VideojsDelegate (:214:46)
   at add_element (:395:17)
   at MutationObserver. (:419:17)

Results

Expected

no error..

Actual

error... ^^

Error output

If there are any errors at all, please include them here.
VM76237:214 Uncaught TypeError: Cannot read property 'classList' of null
at VideojsDelegate (:214:46)
at add_element (:395:17)
at MutationObserver. (:419:17)

Additional Information

I've checked in firefox - no error!
I am using crome (Chromium 65) on linux (if that has anything to do with anything)

versions

videojs

7.3.0

browsers

Chromium 65, firefox seems ok

OSes

I've checked only mine - linux mint 17.3

plugins

nope

Is this is only related to the fact im using Chromium 65??

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Unfortunately, I'm unable to reproduce locally or in browserstack on chrome 65 on win10 or macos.

[DimaM-BeStreet]

I'll test it on my phone this week, if it works - no problem really...
Thank you!
Dima

On Wed, Dec 26, 2018 at 7:55 PM Gary Katsevman [e-mail]
wrote:

Unfortunately, I'm unable to reproduce locally or in browserstack on
chrome 65 on win10 or macos.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/videojs/video.js/issues/5706#issuecomment-450001073,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Abs89BaKeDeLN4nsMsm96jy9Lq0WO3gNks5u87gEgaJpZM4ZfsEF
.

[thijstriemstra]

I think i've seen this in a unit test before (so don't wait for ready event but dispose right away or something like that).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[armaha]

Hi,
I also notice the same issue, with almost the exact same stack trace for VideoJs 6.6. It also only occurs in Chrome. We block our instance from calling dispose if not ready like this:

if(this.player) {
    this.player.dispose();
}

We instantiate the player like this:

const nonReadyPlayer = videojs(
                    this.videoId,
                    this.videoConfig,
                    () => {
                        this.player = nonReadyPlayer;
                    }
);

As we cannot reproduce this exception, it is difficult to pinpoint why this is occurring in a very small number of instances ( n<0.01% of requests). I also cannot find any references to VideoJsDelegate MutationObserver in VideoJs release 6.6.

Is there any specific behavior for autoplay that needs to be guarded against in chrome?
Where does VideoJSDelegate come from if not from video.js repo?

Thanks!

[travisbader]

I think i found a good stack trace. I will attach as our bug tracking too reports it as it is easy to read as formatted.

[thijstriemstra]

@gkatsev can this be re-opened? A check for element seems to be needed in dom.js:

if (element && element.classList) {

[gkatsev]

I'm not seeing an error locally.
While I'm not necessarily opposed to adding a null check to that method but almost always there's something else that needs to be fixed in cases like this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thijstriemstra]

While I'm not necessarily opposed to adding a null check to that method but almost always there's something else that needs to be fixed in cases like this.

Can you re-open this ticket @gkatsev?

[gkatsev]

Anyone have info on how to reproduce this issue?

[travisbader]

@gkatsev See above, there are steps to reproduce in the initial description. It appears to be related to disposing and re-creating video-js objects within a component

[gkatsev]

As I mentioned above, I'm unable to reproduce with either the test page or locally.

[thijstriemstra]

As I mentioned above, I'm unable to reproduce with either the test page or locally.

I wasn't able to reproduce it with that test page either, but while playing with it, I was able to break it using:

      videojs("my_video", {}, function ready() {
        console.log("ready");
        videojs("my_video").dispose();
      });

I don't think it should throw this/any error:

[gkatsev]

Looks like a different error but related to disposing. It probably should handle that case gracefully. Probably a timing issue with preselectTrack there.

[thijstriemstra]

I agree. Wouldn't surprise me that fixing this issue reveals the other issue..

[damjan25]

@gkatsev
Is there a plan to release this in 7.10.2 ? https://github.com/videojs/video.js/pull/6701
Would be really nice. I am seeing this error a lot lately.

(Using videojs + videojsima plugin)
This error gets thrown when I get AdsLoader error: AdError 303: No Ads VAST response after one or more Wrappers
And after player tries to dispose, this error(Cannot read property 'classList' of null) gets thrown.
But for some reason only when I hard reload the page.

[gkatsev]

We just merged #6967, hopefully that should fix some of the issues related to this.