Uncaught ChunkLoadError: Loading chunk vendors~reactPlayerYouTube failed

Current Behavior

I am developing a Django application that integrates React.js for front-end purposes. I have this specific section on a page that has to display a video element of a Youtube livestream.

When I run my web app, I get this error

main.bundle.min.js:106 Uncaught ChunkLoadError: Loading chunk vendors~reactPlayerYouTube failed
main.bundle.min.js:129 GET http://192.168.10.182:8000/vendors~reactPlayerYouTube.bundle.min.js net::ERR_ABORTED 404 (Not Found)

Expected Behavior

vendors~reactPlayerYoutube.bundle.min.js should be fetched from http://<site>/static/ since 'static' is a folder inside my Django app that serves as an assets folder. This is where my assets are located (js, css, and even my react compiled .js file main.bundle.min.js)

To try to resolve, I copied vendors~reactPlayerYouTube.bundle.min.js to this static folder but still the error is there because it expects these files in http://<site>/ and not http://<site>/static/

Steps to Reproduce

create Django app and configure to point assets to a 'static' folder
create React app alongside Django app, use webpackand configure it to compile bundles inside dist-dev in React project root (copy webpack config script below).
configure package.json to run scripts that copy bundle files to your Django static folders (copy package.json script below).
Run npm run dev
Visit your site http://<django-server-ip>

Environment

URL attempting to play: N/A
Browser: Chrome 83.0.4103.97
Operating system: Windows 10
jsFiddle example: N/A
Tools: Djang 2.0 | React ^16.13.1 | webpack ^4.43.0 | @babel/core ^7.10.2 | babel-loader ^8.1.0

Other Information

webpack config dev mode

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      '@react-native-community/async-storage': 'react-native-web',
    },
    extensions: [
      '.web.tsx',
      '.web.ts',
      '.tsx',
      '.ts',
      '.web.jsx',
      '.web.js',
      '.jsx',
      '.js',
    ],
  },
  output: {
   filename: '[name].bundle.min.js',
   path: path.resolve(__dirname, 'dist-dev'),
  },
}

package.json (remove plugins you dont need)

{
    "name": "reactify-ui",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@date-io/date-fns": "1.3.13",
        "@fortawesome/fontawesome-svg-core": "^1.2.28",
        "@fortawesome/free-solid-svg-icons": "^5.13.0",
        "@fortawesome/react-fontawesome": "^0.1.10",
        "@material-ui/core": "^4.10.1",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.55",
        "@material-ui/pickers": "^3.2.10",
        "@progress/kendo-react-dialogs": "^3.14.0",
        "@react-native-community/async-storage": "^1.11.0",
        "axios": "^0.18.0",
        "bootstrap": "^4.5.0",
        "chart.js": "^2.9.3",
        "clsx": "^1.1.1",
        "date-fns": "^2.14.0",
        "fuse.js": "^3.6.1",
        "hls.js": "^0.13.2",
        "html-react-parser": "^0.10.5",
        "jquery": "^3.5.1",
        "lightslider": "^1.1.6",
        "lodash": "^4.17.11",
        "moment": "^2.26.0",
        "popper.js": "^1.16.1",
        "react": "^16.13.1",
        "react-alert": "^6.0.1",
        "react-alert-template-basic": "^1.0.0",
        "react-animated-slider": "^1.1.4",
        "react-awesome-modal": "^2.0.5",
        "react-bootstrap": "^1.0.1",
        "react-bootstrap-date-picker": "^5.1.0",
        "react-chartjs-2": "^2.9.0",
        "react-charts": "^2.0.0-beta.7",
        "react-confirm-alert": "^2.6.1",
        "react-cookies": "^0.1.1",
        "react-countup": "^4.3.3",
        "react-data-table-component": "^6.9.3",
        "react-datepicker": "^2.16.0",
        "react-dom": "^16.13.1",
        "react-hls-player": "^0.1.6",
        "react-image-gallery": "^0.9.1",
        "react-leaf-carousel": "^1.2.2",
        "react-model": "^3.1.2",
        "react-native": "^0.62.2",
        "react-native-keychain": "^6.1.0",
        "react-native-live-stream": "^1.0.1",
        "react-native-sensitive-info": "^5.5.5",
        "react-native-web": "^0.12.3",
        "react-owl-carousel": "^2.3.1",
        "react-owl-carousel2": "^0.3.0",
        "react-player": "^2.1.1",
        "react-redux": "^7.2.0",
        "react-router-dom": "^5.2.0",
        "react-swipeable-views": "^0.13.9",
        "react-table": "^6.10.3",
        "react-text-mask": "^5.4.3",
        "react-time-ago": "^5.0.8",
        "react-video-js-player": "^1.1.1",
        "redux": "^4.0.5",
        "redux-persist": "^6.0.0",
        "redux-persist-encrypted-async-storage": "git+https://github.com/chaudhryjunaid/redux-persist-encrypted-async-storage.git#master",
        "redux-persist-sensitive-storage": "^1.0.0",
        "redux-thunk": "^2.3.0",
        "shortid": "^2.2.15",
        "styled-components": "^5.1.1",
        "text-mask-addons": "^3.8.0",
        "video-react": "^0.14.1",
        "video.js": "^7.8.2",
        "videojs-contrib-hls": "^5.15.0",
        "whatwg-fetch": "^2.0.4"
    },
    "devDependencies": {
        "@babel/core": "^7.10.2",
        "@babel/preset-env": "^7.10.2",
        "@babel/preset-react": "^7.10.1",
        "@progress/kendo-theme-default": "^4.18.2",
        "@react-native-community/eslint-config": "0.0.6",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "copyfiles": "^2.3.0",
        "css-loader": "^3.5.3",
        "metro-react-native-babel-preset": "^0.59.0",
        "mini-css-extract-plugin": "^0.9.0",
        "neo-async": "^2.6.1",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "react-scripts": "1.1.4",
        "redux-logger": "^3.0.6",
        "renamer": "^0.7.3",
        "style-loader": "^1.2.1",
        "uglify-js": "^3.9.4",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.0",
        "webpack-merge": "^4.2.2"
    },
    "scripts": {
        "build": "npm run production && npm run build-rename-prod-css && npm run copy-buildfiles && npm run collectstatic",
        "production": "webpack  --config webpack.prod.js",
        "copy-buildfiles": "npm run copy-build-js && npm run copy-build-css",
        "copy-build-js": "copyfiles -f dist-build/main.bundle.min.js ../staticfiles/js",
        "copy-build-css": "copyfiles -f dist-build/main.bundle.min.css ../staticfiles/css",
        "dev": "npm run development && npm run build-rename-dev-css && npm run copy-devfiles && npm run collectstatic",
        "development": "webpack",
        "copy-devfiles": "npm run copy-dev-js && npm run copy-dev-css",
        "copy-dev-js": "copyfiles -f dist-dev/main.bundle.min.js ../staticfiles/js",
        "copy-dev-css": "copyfiles -f dist-dev/main.bundle.min.css ../staticfiles/css",
        "build-rename-dev-css": "renamer --find main.css --replace main.bundle.min.css dist-dev/main.css",
        "build-rename-prod-css": "renamer --find main.css --replace main.bundle.min.css dist-build/main.css",
        "collectstatic": "python ../manage.py collectstatic --no-input",
        "memory-handler": "node --max-old-space-size=8192 dist-dev/main.bundle.min.js"
    }
}

React component

import React, { Component } from 'react';
import ReactPlayer from 'react-player';

class SopaBoardUI extends Component {

  constructor(props){
      super(props)
  }

  render() {
    return (
      <React.Fragment>
        <div class="card-header board-header"><p class="h5"><i class="fas fa-newspaper"></i> SOPA</p></div>
        <div class='card-body board-body'>
            <div className="row news-board-item-parent">
              <ReactPlayer
                url='<insert-youtube-video-or-live-stream-link>'
                className='react-player'
                playing
                width='100%'
                height='100%'
              />
            </div>
        </div>
      </React.Fragment>
    );
  }
}

export default SopaBoardUI;

cookpete / react-player