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!

Answer 1

I just fixed a similar issue for myself. The error I was receiving was: Uncaught ReferenceError: y is not defined.

I was working on another app's dev/prod issue in React & Vercel that was fixed by changing the browserslist in package.json. This other app also used Maplibre-gl & Maptiler, which renders fine in production.

I can't find the original StatckOverflow answer, but this was my solution in package.json

"browserslist": {
"production": [
  "defaults",
  "not ie 11"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
}

I don't know why this works, maybe someone else can answer.