deckgl-typings
deckgl-typings copied to clipboard
danmarshall
React Context not working with react-map-gl
Description
So I ran into this issue that someone else also seems to have hit online somewhere (sorry for the weird site). Basically, I want to use the Mapbox ContextProvider but the there's a type mismatch. I get the following error:
Type 'Provider<MapContextProps>' is not assignable to type 'Provider<ContextProviderValue>'.
This happens when I pass in
import { _MapContext as MapContext } from "react-map-gl";
...
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
layers={layers}
ContextProvider={MapContext.Provider}
>
...
It looks like we're defining the ContextValueProvider correctly based on the described requirements, but because it's wrapped in a Provider object, it seems to not be happy with the typing of MapContextProps.
I even tried changing the definition of ContextValueProvider to use any and it still doesn't like it.
Solution
It seems like the only way to solve this is to change the ContextProvider attribute on DeckProps to be React.Provider<any>. I don't love that, but I'm not sure what else to do...
Hmmm, it does seem to be broken in 4.9.0 now and I'm not sure why. My first theory was that we needed to add the Partial to the DeckGL object in the react module, but that doesn't seem to work.
Here's the error I'm getting:
Type 'Provider<MapContextProps>' is not assignable to type 'Provider<ContextProviderValue>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<ProviderProps<MapContextProps>> | undefined' is not assignable to type 'WeakValidationMap<ProviderProps<ContextProviderValue>> | undefined'.
Type 'WeakValidationMap<ProviderProps<MapContextProps>>' is not assignable to type 'WeakValidationMap<ProviderProps<ContextProviderValue>>'.
Types of property 'value' are incompatible.
Type 'Validator<MapContextProps> | undefined' is not assignable to type 'Validator<ContextProviderValue> | undefined'.
Type 'Validator<MapContextProps>' is not assignable to type 'Validator<ContextProviderValue>'.
Type 'MapContextProps' is not assignable to type 'ContextProviderValue'. TS2322
43 | controller={true}
44 | layers={additionalLayers ?? []}
> 45 | ContextProvider={MapContext.Provider}