Uncaught TypeError: Cannot read property 'postMessage' of null

[lucasharada]

I have included playerjs on a Video component that has 1 main instance of the Video component and a list with 2 other instances. I'm getting the below error when switching pages and reloading the Video components:

Uncaught TypeError: Cannot read property 'postMessage' of null
    at playerjs.Player.send (player-0.1.0.js?3f26:363)
    at playerjs.Player.ready (player-0.1.0.js?3f26:427)
    at playerjs.Player.receive (player-0.1.0.js?3f26:391)
    at eval (player-0.1.0.js?3f26:320)

I did some tests and the above error is thrown when reloading the list of Video components. I tried removing all listeners on unmount, but it didn't solve the issues. Below are the pieces of my code related to the player.js library:

componentDidUpdate(_, prevState) {
  const { html } = this.state;
  if (prevState.html !== html && !_isEmpty(html) && _isEmpty(this.player)) {
    this.player = new playerjs.Player(
      this.videoContainer.getElementsByTagName('iframe')[0],
    );
    this.player.on('ready', () => {
      this.player.on('play', () => {
        this.trackEvent('Resource Page - Play');
      });
      this.player.on('pause', () => {
        this.trackEvent('Resource Page - Pause');
      });
    });
  }
}

componentWillUnmount() {
    if (this.player) this.player.off();
  }