TypeError: this.videoPlayer.httpSourceSelector is not a function

[KVPasupuleti]

Description

We are using videojs-http-source-selector plugin in our project for 2 years and it's working well. Now, we would like to extend its support to our other projects.

But, when tried to replicate the entire videojs related code to the new project, everything went well except for this httpSourceSelector error. This would be a blocker for us to make the feature live.

Could you help us out with what might have gone wrong or any additional details to take care of?

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Install video-js-http-source-selector in package.json using yarn
2. Import it using require in the Video component developed using React and TypeScript
3. Add videojs-contrib-quality-levels as a peer dependancy
4. Initialize the plugin with this.videoPlayer.httpSourceSelector().
5. Use //@ts-ignore above the initialization to ignore typescript errors

Results

Expected

videojs-http-source-selector plugin should be initialized and the user should be able to see the quality change option

Actual

videojs-http-source-selector is not getting initialized

Error output

TypeError: this.videoPlayer.httpSourceSelector is not a function

Additional Information

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

versions

videojs

7.6.6

typescript

3.7.2

browsers

Chrome 89

OSes

Linux

plugins

videojs-contrib-quality-levels

2.0.9

videojs-http-source-selector

1.1.6

[gkatsev]

This sort of came up in #7091. One thing to try is to remove video.js and quality-levels and the source selector plugins via yarn remove. Verify that the yarn lockfile does not include these anymore. Then, re-add the packages starting with video.js and then the source selector and quality-levels. Hopefully, it'll shake up the tree, so things are correct.

We'll be investigating this as part of #7091 and #7109 so that hopefully it won't be required.

[KVPasupuleti]

This sort of came up in #7091. One thing to try is to remove video.js and quality-levels and the source selector plugins via yarn remove. Verify that the yarn lockfile does not include these anymore. Then, re-add the packages starting with video.js and then the source selector and quality-levels. Hopefully, it'll shake up the tree, so things are correct.

We'll be investigating this as part of #7091 and #7109 so that hopefully it won't be required.

@gkatsev Thanks for the reply. Tried out the process you suggested, but the issue wasn't resolved.

We are using Yarn.

But, when we removed all video-js related packages and reinstalled them using NPM, the issue was resolved.

Any specific reason?

[gkatsev]

I'm not really too sure. What version of yarn are you using?
I'm guessing that somehow the dependency tree that's being made by npm vs yarn is different and so plugins end up using their own version of Video.js since plugins depend on Video.js directly rather than having it be a peer dependency.

[KVPasupuleti]

"engines": {
      "npm": ">=5.6.0",
      "yarn": ">=1.17.3",
      "node": ">=12.6.0"
 }

So, is it mandatory to use the latest version of Video-js to avoid these kinds of issues?