React-map-gl: Locate User example not working when used in CRA

[woss]

when i try to add the same code to a component and then call it within my react app i keep getting the following error,

mapbox-gl.js:33 Uncaught TypeError: Cannot read property 'getMaxBounds' of undefined
    at o._isOutOfMapMaxBounds (mapbox-gl.js:33)
    at o._onSuccess (mapbox-gl.js:33)

Map settings are the same as in the example.

In general all other (that i am using) features are working.

Any help would be appreciated

[Pessimistress]

This error seems to be inside mapbox-gl. Can you check which mapbox-gl version is installed in your project?

[woss]

These are installed components

yarn list v1.19.1
├─ [email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
├─ @mapbox/[email protected]
└─ [email protected]

I wonder why copying 100% of the code from your example to separate file and creating the Storybook story fails.

[niikNak]

Yeah I'm having the same issue. Have the same mapbox-gl version.
Maybe this is relevant? https://github.com/mapbox/mapbox-gl-js/pull/8756/files

[niikNak]

Downgrading to [email protected] seemed to fix the issue.
I'll be honest, I'm a bit new to reporting issues on public repos. Would it be a good idea to report the issue to the mapbox-gl-js team as well?

[woss]

well, it would, but I am using this lib and their examples. Maybe there is nothing to do with the mapbox itself rather than passing the correct data from wrapped component to actual mapbox component.

[VictorBaudot]

Downgrading to [email protected] seemed to fix the issue.

I personally still have the error after downgrading to 1.4.1

[woss]

for me, it's gone.
now I realised that location is off by close to 1km, investigating that 😁

[TashTenner]

Same issue here - is downgrading the only way to solve it?

[Pessimistress]

@xintongxia I tried this on the standalone example and it also errors out. You can reproduce this by upgrading the mapbox-gl dependency to 1.5.0. I believe it can be fixed by assigning _mapboxGeolocateControl._map.

[Pessimistress]

Should be fixed in 5.1.2.

[xintongxia]

5.1.2 is published

[krewllobster]

@xintongxia After upgrading from react-map-gl 5.1.0 to 5.1.2 and trying to nest the within my component, I receive the following error:

Uncaught TypeError: Cannot read property 'classList' of undefined at o._onSuccess (mapbox-gl.js:24638) o._onSuccess @ mapbox-gl.js:24638

This error (when in debug mode on localhost) causes the debugger to pause execution. If I unpause to continue past this error, the map jumps to the user-location (it doesn't fly) and then the map becomes unresponsive.

I am also using create-react-app.

Edit: I found this stack overflow thread from 2016 which implies that a div may be missing around the internal mapbox instance?

[xintongxia]

@krewllobster what is your mapboxgl version? maybe you can try 1.5?

I put our example code in a sandbox, which you can playaround. It would be easier for me to debug if you can share the code which can reproduce the error.
https://codesandbox.io/s/geolocate-control-07nod

[krewllobster]

@xintongxia already on {"mapbox-gl": "^1.5.0"}

The code causing the issue:

```import React, { useState, useRef } from 'react'
import MapGL, { GeolocateControl } from 'react-map-gl'
import mapboxgl from 'mapbox-gl'

const REACT_APP_MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN

const initialViewport = {
latitude: 40.7128,
longitude: -74.006,
zoom: 7
}

const geolocateStyle = {
position: 'absolute',
top: 0,
right: 0,
margin: 10
}

export const MainMap = () => {
// local state
const [mapViewport, setMapViewport] = useState(initialViewport)
const [currentBounds, setCurrentBounds] = useState()

// map reference to give access to underlying mapbox instance
const mainMapRef = useRef()

return (
{...mapViewport}
height={'100%'}
width={'100%'}
ref={mainMapRef}
mapStyle={'mapbox://styles/mapbox/light-v9'}
onViewportChange={setMapViewport}
mapboxApiAccessToken={REACT_APP_MAPBOX_TOKEN}
mapOptions={{ maxZoom: 15 }}
>
positionOptions={{ enableHighAccuracy: true }}
style={geolocateStyle}
/>

)
}
```

I did get it to work within your codesandbox, but its still causing issues in my repo.

[krewllobster]

Also, upon further investigation, the map is not unresponsive after resuming from the error. It was tricking me! I have maxZoom: 15 in mapOptions, rather than using the maxZoom prop.

FYI, if you add mapOptions={{maxZoom: 15}} and keep zooming after the map stops (using macbook trackpad), the map continue "zooming in" even as the viewport doesn't change. In order to zoom back out, you have to un-scroll as much as you over-scrolled.

The zooming is totally fixed by just using the maxZoom prop though, so probably not a real issue. Geolocate still breaks though.

[krewllobster]

And sorry, one more thing (I'm not sure about Github issue etiquette as to whether I should be leaving new comments or editing):

The line in mapbox.gl.js that is causing the error is:
this.options.showUserLocation && "OFF" !== this._watchState && this._updateMarker(e), this.options.trackUserLocation && "ACTIVE_LOCK" !== this._watchState || this._updateCamera(e), this.options.showUserLocation && this._dotElement.classList.remove("mapboxgl-user-location-dot-stale"), this.fire(new t.Event("geolocate", e)), this._finish();
So it seems like its trying to remove an old user location dot that doesn't exist?

If I set showUserLocation={false} then the error goes away.

[Pessimistress]

@krewllobster Which browser are you using?

[krewllobster]

Google Chrome
Version 78.0.3904.97 (Official Build) (64-bit)

[xintongxia]

I'll look into it shortly.

[Pessimistress]

fixed in 5.1.3.