[Bug] Error and no map display when attempting to set baseApiUrl

[kthyer]

Description

When I attempt to set the baseApiUrl for a react-map-gl Map I get a setting getter-only property "baseApiUrl" error and no map display.

Here is my example code.

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: '100vw', height: '100vh'}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    mapboxAccessToken="MY_ACCESS_TOKEN"
    baseApiUrl="https://example.com
  />;
}

The error I get is

TypeError: setting getter-only property "baseApiUrl"
setGlobals                                                                                                                              set-globals.ts:34
Map                                                                                                                                         map.tsx:96
promise callback*/node_modules/react-map-gl/dist/esm/components/map.js/Map</<     map.tsx:81
...

Expected Behavior

I expect baseApiUrl to use the set baseApiUrl in requests, not error, out and display the map.

Steps to Reproduce

Just set the Map's baseApiUrl to anything.

Environment

• Framework version: [email protected]
• Map library: [email protected]
• Browser: Firefox 98.0.2
• OS: Ubuntu 20.04.4 LTS

Logs

TypeError: setting getter-only property "baseApiUrl"
setGlobals                                                                                                                              set-globals.ts:34
Map                                                                                                                                         map.tsx:96
promise callback*/node_modules/react-map-gl/dist/esm/components/map.js/Map</<     map.tsx:81

[kthyer]

I was able to work around this by using the transformRequest prop and replacing https://api.mapbox.com with my own baseApiUrl.

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: '100vw', height: '100vh'}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    mapboxAccessToken="MY_ACCESS_TOKEN"
    transformRequest={(url) => {
        const defaultMapboxApiUrl = "https://api.mapbox.com";

        const newUrl = url.replace(defaultMapboxApiUrl, <new base api url here>)
        
        return {
            url: newUrl
         }
    }
  />;
}

I would still consider this a bug and it may be a mapbox-gl limitation with dynamic importing. Similar issue for mapbox-gl here https://github.com/mapbox/mapbox-gl-js/issues/10452 that makes me believe so.

[Pessimistress]

If there is a limitation of mapbox-gl then there's nothing we can do, however you do not have to use dynamic import. See mapLib.

[kthyer]

I am not personally dynamically importing it, I get this error with a pretty minimal setup and just trying to set baseApiUrl on the map.

If this is a limitation of mapbox and setting baseApiUrl in any circumstance causes an error then I would suggest removing it from the props of <Map> and using transformRequest in its place.

[Pessimistress]

Please click the link in my comment. mapLib prop is default to import('mapbox-gl'). You can remove the dynamic import by

import mapboxgl from 'mapbox-gl';

<Map mapLib={mapboxgl} ... />

[kthyer]

I see.

Ok so I can get it work if I use mapLib={mapboxgl} with baseApiUrl={myUrl}

import mapboxgl from 'mapbox-gl';

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: '100vw', height: '100vh'}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    mapboxAccessToken="MY_ACCESS_TOKEN"
    baseApiUrl="https://example.com
    mapLib={mapboxgl}
  />;
}

Thanks for the quick responses. If I had any suggestions at this point it would be to make a note in the documentation for the baseApiUrl that you will need to not dynamically import mapboxgl via mapLib prop or use the transformRequest prop.