External plugins are not working since version 7.11.0

[lunika]

Description

I'm trying to upgrade from version 7.10.2 to version 7.11.4 but my code is not working anymore.
The problem is with external plugins. I'm using plugins videojs-http-source-selector and videojs-contrib-quality-levels to have a quality selector in the UI.

Since version 7.11.0 both plugins are not registered anymore. If I force to register them calling explicitly videojs.registerPlugin in my module they are registered but then I have error about non existing MenuComponent registered in the videojs-http-source-selector plugin.

In my module I first import them, then I create an instance of videojs and at this time I have an error telling me that the plugin httpSourceSelector does not exists.

My code was working like this in version 7.10.2 of videojs. I follow both plugins documentation to setup them.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? 7.11.0 and above

plugins

are any videojs plugins being used on the page? If so, please list them below.
videojs-http-source-selector: 1.1.6
videojs-contrib-quality-levels: 2.0.9

The project is in typescript (4.1.5) and built using webpack (5.21.2)

Thanks for your help

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://github.com/openfun/marsha/blob/ddc13a03be7345a44c800f49084659600c8272d0/src/frontend/Player/createVideojsPlayer.ts: say @video-archivist-bot save REVqQA

[gkatsev]

Thanks for opening the issue, we'll definitly take a look.

[lunika]

For your information, I wrote a plugin recently, hosted in the same project using videojs and this plugin is registered well with videojs 7.11

The plugin is here and is registered here and enabled if needed using the options.

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://github.com/openfun/marsha/blob/d0da96eefbf2e1104e893d29fad7567d689883c6/src/frontend/Player/createVideojsPlayer.ts: say @video-archivist-bot save JA1eLA

[gkatsev]

@lunika interesting, so, that other plugin is being registered fine but quality-levels isn't?

[lunika]

Yes, my plugin developed in the same project is registered but not videojs-http-source-selector and videojs-contrib-quality-levels

[gkatsev]

Thanks, that's helpful to try and narrow things down!

[onhate]

I'm facing the same issue

[cboissel-onf]

Same issue here

[gkatsev]

I did a quick check, and it seems to be working for me, both in using import and using require. Looking at the code that @lunika linked to, it seems like everything should be working fine? Only think I can think of there is that it's a weird interaction with typescript maybe?
@lunika, or anyone who is seeing this issue, can you create a minimal test case where you can reproduce this? In my minimal test it's working properly.

[cviktor]

I had the same issue in an Angular app when I tried to integrate VideoJS and added the videojs-contrib-quality-levels plugin. It seems that the registerPlugin is called by the plugin but the function that is passed in the registerPlugin parameter is never called. My solution was to call the registerPlugin by hand. I am using the same versions as in the original comment.

[lunika]

I was working on what you ask @gkatsev, I updated first on version 7.11.7 and I have now a different error:

Cannot find module '@videojs/vhs-utils/cjs/resolve-url.js' from 'node_modules/video.js/dist/video.cjs.js'

Should I open a new issue for this case ?

[lunika]

I tried on codesandbox to reproduce this issue but it's working...

If someone else in this ticket issue want to take a look: https://codesandbox.io/s/sad-bird-8n4uc

[lunika]

Ok so I have a local version working.
I don't know if it's the case for everybody on this issue but I'm using yarn. Yarn is creating a yarn.lock file and every week I have a bot updating all my dependencies. This yarn.lock is quite old now.

I removed it to regenerate a fresh one and since I don't have this issue, my code is working with videojs 7.11.4... Can everybody reproduce this ?

But I still have the issue related here: #7091 (comment)

[lunika]

I made a PR on my project resolving the issue as explain in my last message: openfun/marsha#899

[gkatsev]

@lunika good to hear that the main issue went away. As for the videojs/vhs-utils/cjs/resolve-url, we saw this locally but theoretically #7128 should've fixed it.
Seems like it's working ok on the codesandbox if I update to 7.11.7? Though, now I wonder if it's a yarn thing. What's the output of yarn list @videojs/vhs-utils? Also, what's the local node_modules file structure? Wonder if yarn is putting it into a different place than npm is.
For reference, locally, I have:

$ npm ls @videojs/vhs-utils
video.js@7.11.6 /Users/gkatsevman/p/video.js
└─┬ @videojs/http-streaming@2.6.4
  └── @videojs/vhs-utils@3.0.0

[gkatsev]

Spoke with @evanfarina as he has a bit more experience with yarn, and he found that, particularly with versions of Video.js that update VHS, he needs to do a little dance to get it working right with the yarn lock file.
He deletes all video.js related packages including Video.js. He confirms that they have been removed from the lock file. Then he re-installs video.js and then he re-installs the other packages like videojs-contrib-quality-levels.

In addition, this might be related to #7109 in that addressing #7019 could improve things so that you don't need to do any of these shenanigans. It's something we'll investigate.

[lunika]

I tried again with version 7.11.8 and it's still failing like in this comment

When I list the package installed I have this

$ yarn list --pattern videojs
yarn list v1.22.5
├─ @videojs/http-streaming@2.6.4
│  ├─ @videojs/http-streaming@2.4.2
│  │  └─ @videojs/vhs-utils@2.3.0
│  └─ @videojs/vhs-utils@3.0.0
├─ @videojs/vhs-utils@2.3.0
├─ @videojs/xhr@2.5.1
├─ aes-decrypter@3.1.2
│  └─ @videojs/vhs-utils@3.0.0
├─ m3u8-parser@4.5.2
│  └─ @videojs/vhs-utils@3.0.0
├─ mpd-parser@0.15.4
│  └─ @videojs/vhs-utils@3.0.0
├─ videojs-contrib-quality-levels@2.0.9
│  └─ @videojs/http-streaming@2.4.2
├─ videojs-font@3.2.0
├─ videojs-http-source-selector@1.1.6
│  └─ @videojs/http-streaming@2.4.2
└─ videojs-vtt.js@0.15.2

There are 2 versions of @videojs/http-streaming required. One by video.js directly. The other is not a direct dependency. Plugins are requiring video.js "^6 || ^7" and last available version of video.js is 7.11.4. Maybe once a new official release will be made I will don't have the issue anymore.

[lunika]

A little update.

Version 7.11.8 is now a public release and to update to this version I had to remove first all video.js package installed and then reinstall them. This is the way to upgrade video.js when you use yarn...

I think we can now close this issue.

Thanks for your help @gkatsev

[gkatsev]

Glad the uninstall-reinstall dance works. I was hoping that adding peer dependencies in v7.12 would've helped, but it seems like it doesn't.
We'll revisit whether we should mark the transitive deps of VHS as direct dependencies of Video.js, which, hopefully, should resolve needing to do the re-install dance.

[tzarebczan]

Running yarn remove video.js and then add didn't work here. Trying clearing out the lock file next.