I know this is an old post..

As I understand it, the cause is that mapbox (not react-map-gl) has a bug in it that does not transpile correctly with "npm build".

Fortunately you do NOT have to eject your app as I learned in this link: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

I had to npm install worker-loader

Then add the following lines.

    // had this.
    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';


    // added the following 6 lines.
    import mapboxgl from 'mapbox-gl';

    // The following is required to stop "npm build" from transpiling mapbox code.
    // notice the exclamation point in the import.
    // @ts-ignore
    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

Since I'm using typescript and linting, I had to add some directives to ignore warnings/errors that would otherwise stop it from compiling.

Note that I did not have to install mapboxgl since react-map-gl uses it.

But, I did need to add eslint-disable-next-line import/no-unresolved

and eslint-disable-next-line import/no-webpack-loader-syntax combined on the same line.

I am using "react-map-gl": "^6.1.17".