React - Uncaught TypeError: Cannot read property 'Component' of undefined

Question

I'm using react-media-player as a player in my app. I installed it like so:

npm install react-media-player --save

and at index.html:

<script src="https://unpkg.com/react-media-player/dist/react-media-player.js"></script>
//(UMD library exposed as `ReactMediaPlayer`)

Here's the code where I import the module into my component:

import React, { Component } from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import { Media, Player, controls } from 'react-media-player'



class Tracks extends Component{
  constructor (props) {
    super(props);
    this.state = {      
        artists:[],
        titles:[],
        energies: [],
        genres: [],
        popularities:[],
        images:[],
        previews:[],
        template:''
    };
  };

  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getTrack();
    }
  };

  getCoffee(event) {
    const {select} = this.props
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/track/${select}`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
      console.log(res.data.data)
      console.log(select)
      this.setState({
        playlist: res.data.data[0].playlist,
        artists: res.data.data[0].artists,
        titles: res.data.data[0].titles,
        energies: res.data.data[0].energies,
        genres: res.data.data[0].genres,
        popularities: res.data.data[0].popularities,
        images: res.data.data[0].images,
        previews: res.data.data[0].previews,
        template: res.data.data[0].content,
      })
    })    
    .catch((error) => { console.log(error); });
  };

  Capitalize(str){
    return str.charAt(0).toUpperCase() + str.slice(1);
    }

  render(){
    const { select } = this.props
    const { PlayPause, CurrentTime, Progress, Duration, MuteUnmute } = controls
    const { artists, titles, energies, genres, popularities, images, previews } = this.state;

    return (
      <>
        { 
          artists.map((artist, index) => {
            /* 
            Obtain preview from state.previews for current artist index 
            */
            const title = titles[index];
            const energy = energies[index];
            const genre = genres[index];
            const popularity = popularities[index];
            const image = images[index];
            const preview = previews[index];
            /* 
            Render current artist data, and corresponding preview data
            for the current artist 
            */
            return (
              <div>
                    <span key={index}>
                      <tr> 
                        <img src={image}  alt="" height="42" width="42" />
                        <td class="number">{ artist }</td>
                        <td class="number">{ title }</td>
                          <Media>
                            <div className="media">
                              <div className="media-player">
                                <Player src={preview} />
                              </div>
                              <div className="media-controls">
                                <PlayPause />
                                <CurrentTime />
                                <Progress />
                                <Duration />
                                <MuteUnmute />
                              </div>
                            </div>
                          </Media>
                      </tr>
                    </span>
              </div>
            )
          })
        }
      </>   
    )
  }
}

export default withRouter(Tracks);

But I'm experiencing an odd behaviour. Every time I stop my client container, I get the following error:

Failed to compile
./src/components/Tracks.jsx
Module not found: Can't resolve 'react-media-player' in '/usr/src/app/src/components'

After a while, though, when I change some code and save the changes, it compiles and starts working. Only to break again when client is restarted:

This is what my console shows at all times (even when it is working):

react-media-player.js:344 Uncaught TypeError: Cannot read property 'Component' of undefined
    at Object.<anonymous> (react-media-player.js:344)
    at __webpack_require__ (react-media-player.js:35)
    at Object.<anonymous> (react-media-player.js:69)
    at __webpack_require__ (react-media-player.js:35)
    at react-media-player.js:55
    at react-media-player.js:58
    at webpackUniversalModuleDefinition (react-media-player.js:14)
    at react-media-player.js:15

and this is what console shows me when it throws compile error:

Brewing.jsx:21 Uncaught Error: Cannot find module 'react-media-player'
    at webpackMissingModule (Brewing.jsx:21)
    at Module../src/components/Tracks.jsx (Brewing.jsx:21)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../src/App.jsx (Spotify.css:4)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../src/index.js (spotify-auth.js:8)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (index.js:10)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

What is wrong here?

Sidenote: I have deleted package-lock.jsonand and reinstalled the module, to no avail. react-media-player is present at /node_modules.

package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.5.3",
    "react-html-parser": "^2.0.2",
    "react-media-player": "^0.7.7",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "spotify-web-api-js": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2"
  }
}

Answer 1

You need to remove the

<script src="https://unpkg.com/react-media-player/dist/react-media-player.js"></script>
//(UMD library exposed as `ReactMediaPlayer`)

from index.html. It is only if you are using react-media-player throw CDN.

Also try to remove package-lock.json and node_modules and run npm install