MapboxGL won't work in NodeJS production environment, but works in development

Question

I have this section in index.js:

<ReactMapGL
    ref={this.map}
    className={classes.root}
    {...viewport}
    width="100%"
    height="100%"
    scrollZoom={isExpanded ? true : false}
    touchAction={isExpanded ? 'pan' : 'pan-y'}
    mapStyle={this.getMapStyle(homicides)}
    interactiveLayerIds={["homicides"]}
    getCursor={this.getCursor}
    onClick={this.handleClick}
    mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN}
    onViewportChange={onViewportChange}
>

My .env file has this:

REACT_APP_MAPBOX_API_ACCESS_TOKEN=pk.my-big-long-mapbox-api-token

When I run npm start on my local computer, which runs Arch Linux, it opens my web browser and navigates to http://localhost:3000/, and I can see the map.

But then I moved the project to a remote Arch Linux server. On the remote server, I ran npm run build, then serve -s build, which told me to go to http://my-server-ip-address:3000. I went there, but the map did not show up.

In my browser's development console, I saw this error:

Uncaught Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes at e.RequestManager._makeAPIURL (mapbox.js:214:23) at e.RequestManager.normalizeSourceURL (mapbox.js:104:21) at R (load_tilejson.js:38:71) at Se.load (vector_tile_source.js:110:33) at Se.onAdd (vector_tile_source.js:146:14) at Jt.addSource (style.js:753:50) at Jt._load (style.js:311:18) at style.js:278:18

I've run npm update.

None of the solutions from these StackOverflow questions have helped me either:

• How to solve that A valid Mapbox access token is required to use Mapbox GL JS?
• Error: An API access token is required to use Mapbox GL

I also tried replacing {process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN} with the actual API token's string. It works on my local machine when I run npm start but not on my remote server when I run the same command. The map also does not work when I run npm start and go to http://my-server-ip-address:3000.

UPDATE

In my development environment -- my personal computer, which has nginx installed -- I ran npm run build and navigated my browser to http://localhost/my-project/build/.

When the page loads, I can open my browser's Developer Tools console with Ctrl+Shift+C, navigate to the "Network" section, and see this GET request: https://api.mapbox.com/v4/mapbox.mapbox-streets-v7.json?secure&access_token=MAPBOX_API_ACCESS_TOKEN.

But when I run npm run build in my project's directory, then navigate my browser to http://my-server-ip-address/my-project/build, I cannot see any such GET request when in my browser's dev console.

The only Mapbox-related GET request I see is this one: https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js.

Answer 1

My development package.json had "react-map-gl": "^4.1.16". on production, is a version higher than 7.0.

I deleted package-lock.json in the production server then re-ran npm install and npm run build.