Visgl from React-map-gl Repository

Other

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

Issue Opened
Kthyer Opened Issue On Sep 14th 2022, 6:50

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: react-map-gl@7.0.19
  • Map library: mapbox-gl@2.10.0
  • 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 
Comment
Kthyer commented on 2 months ago

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.

Comment
Pessimistress commented on 2 months ago

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.

Comment
Kthyer commented on 2 months ago

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 and using transformRequest in its place.

Comment
Pessimistress commented on 2 months ago

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} ... /> 

Comment
Kthyer commented on 2 months ago

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.

About Repository

React friendly API wrapper around MapboxGL JS
Language: TypeScript
Star: 6880
Fork: 1250
Watchers: 6880
Open Issues: 28
https://github.com/visgl/react-map-gl
Other
Last updated: 05 Dec 2022
Tropics: