react-map-gl Not Working with Webpack, but Plain Mapbox Does

[wyatt-shein]

Hi there! After much time spent failing to fix this issue, I'm hoping someone here can help!

I am trying to use react-map-gl in my react webpack app. Using this example on their website I have no issue and the map loads just fine.

However, when i use react-map-gl with the simplest example in the getting-started, it works just fine locally but as soon as i push to another environment (staging, production) i get these errors:

main.js:2 ChunkLoadError: Loading chunk 925 failed.

main.js:2 ChunkLoadError: Loading chunk 925 failed.
(error: https:/my-app-url.com/mapboxTrial/925.main.js)

I am not an expert in webpack but I am assuming that is where my issue lies. I have a pretty simple webpack config ill post below. Thanks so much in advance for the help. The sooner I can get past this the sooner I can deep dive into mapbox! Please let me know if I can clarify anything

const path = require("path");
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  experiments: {
    topLevelAwait: true,
  },
  output: {
    filename: "main.js",
    publicPath: '/',
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
    new NodePolyfillPlugin(),
    new Dotenv({
      path: `./.env.${process.env.NODE_ENV}`,
      systemvars: true,
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "build"),
      publicPath: '/',      
    },
    historyApiFallback: { index: "/", disableDotRule: true },
    port: 8080,
  },
  module: {
    // exclude node_modules
    rules: [
      {
        test: /\.(js|jsx)$/,         // <-- added `|jsx` here
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  // pass all js files through Babel
  resolve: {
    extensions: ["*", ".js", ".jsx"],    // <-- added `.jsx` here
    fallback: {
      'tls': false,
      'net': false,
      'fs': false,
      'child_process': false,
    },
  },
};

[sitong6940]

I also have the same issue but it was ChunkLoadError: Loading chunk 158 failed.