I have a React component that uses the https://github.com/selz/plyr media player. Everything works fine until the component unmounts, which results in an error from the Vimeo API. Specifically: Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null.

After this error occurs, I try to load the module again it will fail due to this.player being undefined, but if you destroy that, and try again it will load. Perhaps the React Tree is saving the first iteration of the component, and I need to completely destroy it somehow?

Here's my component:

import React, {Component, PropTypes} from 'react';
import {findDOMNode} from 'react-dom';
import plyr from 'plyr';

/**
 * @desc Regex to retrieve the Vimeo video ID from the URL.
 * @type {RegExp}
 */
const regex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/g;

export default class Vimeo extends Component {

  static propTypes = {
    url: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    // Use regex to get the video id from the url
    this.videoId = regex.exec(this.props.url);
  }

  /*
   |--------------------------------------------------------------------------
   | Digest Cycle
   |--------------------------------------------------------------------------
   */

  /**
   * @desc Initiate video player.
   */
  componentDidMount() {
    this.player = plyr.setup(findDOMNode(this), {
      controls: [],
      autoplay: true,
      loop: true,
      mute: true,
    });
    this.player[0].on('ready', () => {
      // Mute the video
      if (!this.player[0].isMuted()) {
        this.player[0].toggleMute();
      }
    });
  }

  /**
   * @desc Destroy video player
   */
  componentWillUnmount() {
    this.player[0].destroy();
  }

  /*
   |--------------------------------------------------------------------------
   | Render
   |--------------------------------------------------------------------------
   */

  render() {
    let player = null;
    if (typeof this.videoId !== 'undefined' && this.videoId !== null) {
      player = (
        <div>
          <div
            data-type="vimeo"
            data-video-id={this.videoId}
          />
        </div>
      );
    }

    return player;
  }
}