Map not showing in mapbox

Question

I'm using mapbox api for my application where user can add markers based on his current location. The map was loading just fine while it was running on localhost but after hosting it in netlify, all other components are loading but not the map. Even the markers on the map are showing but the map isn't showing up. This is my App link. There are some errors on the console. But I'm not sure what is causing this behavior. I saw a similar question before, but those solution didn't work for me. I even created a new api key, there were no URL restrictions. So any suggestions would be appreciated.

<ReactMapGL
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX}
        {...viewport}
        onViewportChange={(nextViewport) => setViewport(nextViewport)}
        mapStyle={process.env.REACT_APP_MAP_STYLE}
        onDblClick={handleAddPlace}
        transitionDuration={200}
      >
        {pins.map((pin, idx) => (
          <div key={idx}>
            <Marker
              latitude={pin.lat}
              longitude={pin.long}
              offsetLeft={-viewport.zoom * 3.5}
              offsetTop={-viewport.zoom * 7}
              onClick={() => handlePinClick(pin._id, pin.lat, pin.long)}
            >
              <FaMapMarkerAlt
                style={{
                  fontSize: viewport.zoom * 7,
                  color: pin.username === currentUser ? "#ff0984" : "#4f56a5",
                  cursor: "pointer",
                }}
              />
            </Marker>
            ...
      </ReactMapGL>

Answer 1

Yes in the package.json I added the following:

  "browserslist": {
    "production": [
      ">0.2%", 
      "not dead", 
      "not ie 11", 
      "not chrome < 51", 
      "not safari < 10", 
      "not android < 51",
      "not op_mini all"
    ],

The "browserlist" attribute was already there I just augmented it to include more and that fixed the issue for me. The mapbox page is not super clear on how to implement the recommended fixes within a react app, so you have to do some translation of their suggestions. I hope this works for you as well.