Vimeo Player player.js not loading on mount in NextJS

[erikmartus]

Current Behavior

We have implemented a Vimeo React Player in our NextJS application, however we noticed the player behaving differently in our production environment. When navigating from a page without a video player to a page with a video player, player.js is not being requested which prevents several of our controls from functioning. We are seeing these warnings in the console when player.js hasn't been loaded:

ReactPlayer: Vimeo player could not call setPlaybackRate – The method was not available
ReactPlayer: Vimeo player could not call setQuality – The method was not available

We have a business account, so both of these methods are available to us via the SDK.

If we refresh the page, player.js is fetched and the controls function as we expect them to. Additionally, if we then navigate to another page with a video player, the controls do not work again until the page is refreshed.

Expected Behavior

player.js should be available as soon as the player is ready.

Steps to Reproduce

1. ~Go to https://mrionline.com/course/radiology-emergency-imaging-chest/~
2. ~Click on any link with a video icon~
3. ~Attempt to change the playback speed or quality~
4. ~Refresh the page~
5. ~Attempt to change the playback speed or quality again~

We were able to implement a work around, and weren't able to reproduce this issue outside our production environment.

[walteraandrade]

It's working fine for me 🤔

[erikmartus]

We were able to implement a work around by adding a Next script element to our component and ensuring that player.js is fetched before trying to load the player.

<Script
    src="https://player.vimeo.com/api/player.js"
    onLoad={() => setSdkLoaded(true)}
/>

We're still not sure why this happened in the first place, when investigating we were not able to reproduce it in our development or test environments. Our test environment is set up to be identical to our production environment (running in a container that is started up with the same command). We haven't fully ruled out that it was something in our prod config, but we weren't able to pinpoint anything there or find anything in react player's, load-script's, or next's documentation that would explain why the script was fetched in the first place.