[Bug] mymap?.getMap()?.getStyle() results in Error: Cannot read properties of undefined (reading 'version')

[tordans]

Description

I am trying to access getStyle in a child component of Map or MapProvider. My goal is to access the layers and other attributes that are only available on Map getStyle() in a self contained child component.

This explodes in mapbox-gl and maplibre-gl.

The workaround for this is, to setLoaded(true); in onLoad and only call .getStyle() after onLoad ran.

Expected Behavior

a. Can react-map-gl guard against this error and return undefined instead?
b. Can react-map-gl improve the error message? ("reading .version" is very unhelpful to debug the issue.)
c. I suggest to extend the docs for the useMap hook to explain this behavior. See also #2118

Steps to Reproduce

mapbox-gl

1. Open https://stackblitz.com/edit/react-ts-plxyzt?file=App.tsx,MapView.tsx
2. Check the logs…
   • See test logs in handleOnload work as expected
   • See test logs with "WHEN LOADED" which work fine (see "Workaround" above)
3. Uncomment the line // 🔴🔴 THIS DOES NOT WORK (throw)
4. ==> The app crashed

maplibre-gl

1. Open https://stackblitz.com/edit/react-ts-bx4sty?file=App.tsx,MapView.tsx
2. Line // 🔴🔴 THIS DOES NOT WORK (throw) is already active
3. ==> The app crashed

Environment

See Stackblitz.

Logs

----------START // FIRST RENDER
mymap
=> undefined // expected, first render

----------1 BEFORE mymap?.getMap()?.getStyle()
mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

mymap?.getMap()?.getStyle()
=> "FALLBACK for mymap?.getMap()?.getStyle()"
----------2 AFTER mymap?.getMap()?.getStyle()


----------START // SECOND RENDER
mymap
==> undefined

----------1 BEFORE mymap?.getMap()?.getStyle()
mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

mymap?.getMap()?.getStyle()
=> "FALLBACK for mymap?.getMap()?.getStyle()"
----------2 AFTER mymap?.getMap()?.getStyle()


----------START // THIRD RENDER
mymap
=> {getMap: ƒ, getCenter: ƒ, getZoom: ƒ, getBearing: ƒ, …}

----------1 BEFORE mymap?.getMap()?.getStyle()
mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

// ??? What is going on here? React just stops the render and starts again?


----------START // ANOTHER RERENDER
mymap
=> {getMap: ƒ, getCenter: ƒ, getZoom: ƒ, getBearing: ƒ, …}

----------1 BEFORE mymap?.getMap()?.getStyle()
mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

// ??? Again…


----------START // ANOTHER RERENDER
mymap
=> {getMap: ƒ, getCenter: ƒ, getZoom: ƒ, getBearing: ƒ, …}

----------1 BEFORE mymap?.getMap()?.getStyle()
mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

// ??? Again…


----------START // ANOTHER RERENDER
mymap
=> {getMap: ƒ, getCenter: ƒ, getZoom: ƒ, getBearing: ƒ, …}

----------1 BEFORE mymap?.getMap()?.getStyle()

mymap?.getMap()?.style?.stylesheet?.modified
=> undefined

=> Error: Cannot read properties of undefined (reading 'version')
The above error occurred in the <MapView> component:

at MapView (https://react-ts-bx4sty.stackblitz.io/~/MapView.tsx:35:39)
at MapProvider (https://react-ts-bx4sty.stackblitz.io/turbo_modules/react-map-gl@7.0.21/dist/es5/components/use-map.js:36:42)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
maplibre-gl.js:35
Error: Cannot read properties of undefined (reading 'version')
maplibre-gl.js:35
Error: Cannot read properties of undefined (reading 'version')
maplibre-gl.js:35
Error: Cannot read properties of undefined (reading 'version')

[Pessimistress]

I'm not sure why it should be the responsibility of this library. After getMap() you are calling native methods on the map instance. That is subject to whatever behavior the underlying library has.