How to add mux.js for shaka in Reactjs app

I’m using shaka player in ReactJs application. How can I load mux.js before loading shaka player?

import React from 'react'
import shaka from 'shaka-player'

export default class HexPlayer extends React.Component {
  componentDidMount() {
    shaka.polyfill.installAll();
    if (shaka.Player.isBrowserSupported()) {
    var video = document.getElementById('video');
    var player = new shaka.Player(video);
      window.playerShaka = player;
      this.initPlayer();
    } else {
      console.error('Browser not supported!');
    }
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.url !== this.props.url){
      this.initPlayer(true,nextProps.url);
    }
}
initPlayer(kill,url){
    playerShaka.addEventListener('error', this.onErrorEvent);
    if(kill){
      playerShaka.unload();
      console.log("The Url is:"+url)
      playerShaka.load(url).then(function() {
        console.log('The video has now been loaded!');
      }).catch(err=>{
        this.onError 
        console.log("err 1")
        console.log(err)
      }
    ); 
    }
    else{
      console.log("The Url is:"+this.props.url)
      playerShaka.load(this.props.url).then(function() {
        console.log('The video has now been loaded!');
      }).catch(err=>{
        this.onError
        console.log("err 2")
        console.log(err)
      }); 
    }
    
  }
onErrorEvent = (event) =>{
  this.props.errorHandler(event)
  this.onError(event.detail);
}

onError(error) {
  console.log("Error occured2")
  console.error('Error code', error.code, 'object', error);
}

componentWillUnmount() {
  playerShaka.unload(this.props.url).then(function() {
    console.log('The video has now been stopped!');
  }).catch(err=>{
  })

}
  render() {
    return (
    <div>
      <video id="video"
            width="100%"
            height='500'
            poster={this.props.poster}
            controls={true}
            autoPlay={true}>
          </video>
    </div>
  );
  }
}

[GlitterCakes]

@joeyparrish Your advice on attaching it to window has worked, i was trying to attach it as “mux” but i noticed you said “muxjs” and now I have it working. For anyone else that needs to enable mux when using react, the following works

I created a component for shaka-player, in the top of my class file I did

import muxjs from "mux.js";

Then I assigned it within my components class constructor like this

window.muxjs = muxjs;

Thank you for the advice I really appreciate it.

[joeyparrish]

Add a <script> tag to your HTML that loads mux.js. As long as it is loaded before you instantiate an instance of shaka.Player, you will get the benefit of mux.js in that instance.

Does this answer your question?