Map getting rendered only in localhost - Not displayed after app build process

Question

I am working on a react application which have two maps (one leaflet+esri map and the other is maptiler). I have got the API keys for both, and it gets rendered properly in localhost environment.

However, when I build and publish the site, the map is not getting rendered.

The network tab seems fine - no CORS issue or failed requests. I can see the request for map data is 200 OK, and the JSON data for the map returned is correct.

There is an error in the console that "Uncaught ReferenceError: g is not defined", which is not so much helpful to debug the issue.

I have used various other libraries (including charting libraries) and all seems to work fine. The issue is only with rendering maps.

For example, here is how I try to render the maptiler map, in React. Same this happening with react-leaflet also.

import Map, {  NavigationControl } from "react-map-gl";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

const App = () => {
return (
<div>
        <Map
          mapLib={maplibregl}
          initialViewState={{
            longitude: 0,
            latitude: 0,
            zoom: 2,
          }}
          style={{ width: "80vw", height: "90vh" }}
          mapStyle="https://api.maptiler.com/maps/streets/style.json?key=API_KEY"
        >
          <NavigationControl position="top-left" />
        </Map>
      </div>
);
}

Here is my package.jsonscripts:

"scripts": {
    "prestart": "node aspnetcore-https && node aspnetcore-react",
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"  
    },

Versions:

{
     "maplibre-gl": "^3.1.0",
     "react-map-gl": "^7.0.25",
     "esri-leaflet": "^3.0.10",
     "esri-leaflet-vector": "^4.1.0",
     "react-leaflet": "^4.2.1",
}

Any ideas why this might be happening? Thanks!