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:

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.

From the docs in the supplied link: "You must supply a valid access token by using the access_token query parameter in every request." Does this react component set that required parameter? — Phix, Aug 24 '23 at 22:25
It is working in development mode on my local machine so I would think so. — Generic_User_ID, Aug 24 '23 at 22:28
Can you double check? Are there domain restrictions with mapbox? — Phix, Aug 24 '23 at 22:30
@Phix I logged into my Mapbox account and see no URL restrictions on my token. — Generic_User_ID, Aug 29 '23 at 19:59
Ok, going back to my previous question, did you write this react component that youre passing the API key to? If not, is it old enough to be passing the old query parameter? Do you see network calls to mapbox, if so, does it pass the expected key with the expected param name? — Phix, Aug 29 '23 at 20:12

score 0 · Accepted Answer · answered Sep 01 '23 at 19:42

0

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.

answered Sep 01 '23 at 19:42

Generic_User_ID

1,067
2
13
16

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

1 Answers1