Mapbox Token doesn't work in React App after build stage

Question

I use Mapbox layers in my React app using 'react-map-gl' library. Having the Token added in the code of App.js like that:

const TOKEN = 'Token';

//

<StaticMap mapboxApiAccessToken={TOKEN} reuseMaps mapStyle={mapStyle}

it works perfectly while testing with npm start.

But after npm build and deploy on netlify the map is not loading. The Token is default public one. I suppose that I have to add it in a different way, but how?

Answer 1

It seemed to be a transpillation problem.

Instead of using just

import mapboxgl from 'mapbox-gl'; 

I used this

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax