title: hls.js sample video not working in react application
body: <p>player.jsx file </p>
  
  <pre><code>import React, { Component } from "react";
  import Hls from "hls.js";
  
  class Player extends Component {
    state = {};
  
    componentDidUpdate() {
      if (Hls.isSupported() &amp;&amp; this.player) {
        const video = this.player;
        const hls = new Hls();
        hls.loadSource(
          "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
        );
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
          video.play();
        });
      }
    }
  
    render() {
      return (
        &lt;div className="playerwrapper player"&gt;
          &lt;div className="playerInner"&gt;
            &lt;video
              className="videoCanvas"
              ref={player =&gt; (this.player = player)}
              autoPlay={true}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Player;
  </code></pre>
  
  <p>when I compile it, it doesn't flash the sample video, instead, it throws an error in the console as </p>
  
  <pre><code>blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42 Uncaught TypeError: Cannot read property 'call' of undefined
      at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
      at Object.srcDemuxDemuxerWorkerJs (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:184)
      at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
      at webpackBootstrapFunc (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:170)
      at blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:173
  </code></pre>
  
  <p>though I have installed, hls.js through <code>npm i hls.js</code>, it throws an error on loading though in network tab it receives the data chunks from load resource but failed to play video and through an error in the console</p>