javascript - React + ES6: Dash.js, MediaPlayer is not a function

Question

I'm trying to build a component on ReactJs which basically wraps the [Dash.js][1] web-player to handle working with MPEG-DASH format.

What I have in my file is:

import React, { Component } from 'react'
import dashjs from 'dashjs/dist/dash.all.min.js'

export default class Player extends Component {

    constructor(props){
        super(props);
        this.classRef = React.createRef(null);
        this.src = props.src;
    }

    componentDidMount(){
        const video = this.classRef.current;
        const player = dashjs.MediaPlayer().create();

        player.initialize(video, this.src, true);
        
    }
    
    render() {
        return (
            <video
                ref={this.classRef}
            />
        )
    }
}

which returns the message on browser dashjs_dist_dash_all_min_js__WEBPACK_IMPORTED_MODULE_2___default.a.MediaPlayer is not a function, pointing the error to the second line on componentDidMount method.

I look into the source code present on dash.all.debug.js to see how should I handle the MediaPlayer object, and what I have is that MediaPlayer is indeed a function:

function MediaPlayer() {
   (... ommited)
}

With success, I maded a component on shaka-player using almost the same method of wrapping its player. To be honest. I'm not really that experience on javascript to understand exactly what is going on. Maybe someone knows something obvious which I don't see?

Thanks. [1]: https://github.com/Dash-Industry-Forum/dash.js

question from:https://stackoverflow.com/questions/65911626/react-es6-dash-js-mediaplayer-is-not-a-function

Answer 1

Your import statement should be like below

import dashjs from 'dashjs'