validateStyle is not recognized by Typescript for the maplibre options

[Tijs-B]

Not sure if I should create an issue for this, because I am not sure whether this is an actual bug or intended.

In my map component, I'd like to disable validateStyle in production. A simple example:

import Map from 'react-map-gl/maplibre';

export default function MyMap() {
  return (
    <Map validateStyle={false} />
  )
}

The validateStyle prop is a valid maplibre MapOption property: docs

But Typescript complains about this:

src/components/map/MyMap.tsx:5:10 - error TS2322: Type '{ validateStyle: boolean; }' is not assignable to type 'IntrinsicAttributes & { zoom?: number | undefined; bearing?: number | undefined; pitch?: number | undefined; maxZoom?: number | undefined; minZoom?: number | undefined; interactive?: boolean | undefined; minPitch?: number | undefined; maxPitch?: number | undefined; maxBounds?: LngLatBoundsLike | undefined; renderWorldCopies?: boolean | undefined; scrollZoom?: boolean | undefined; boxZoom?: boolean | undefined; dragRotate?: boolean | undefined; dragPan?: boolean | DragPanOptions | undefined; keyboard?: boolean | undefined; doubleClickZoom?: boolean | undefined; touchZoomRotate?: boolean | undefined; touchPitch?: boolean | undefined; localIdeographFontFamily?: string | undefined; pixelRatio?: number | undefined; antialias?: boolean | undefined; attributionControl?: boolean | undefined; bearingSnap?: number | undefined; clickTolerance?: number | undefined; collectResourceTiming?: boolean | undefined; crossSourceCollisions?: boolean | undefined; cooperativeGestures?: boolean | undefined; customAttribution?: string | string[] | undefined; hash?: string | boolean | undefined; fadeDuration?: number | undefined; failIfMajorPerformanceCaveat?: boolean | undefined; locale?: any; logoPosition?: ControlPosition | undefined; preserveDrawingBuffer?: boolean | undefined; pitchWithRotate?: boolean | undefined; refreshExpiredTiles?: boolean | undefined; trackResize?: boolean | undefined; transformRequest?: RequestTransformFunction | undefined; maxTileCacheSize?: number | undefined; maplibreLogo?: boolean | undefined; } & Partial<ViewState> & MapCallbacks & { mapboxAccessToken?: string | undefined; initialViewState?: (Partial<ViewState> & { bounds?: LngLatBoundsLike | undefined; fitBoundsOptions?: { offset?: PointLike | undefined; minZoom?: number | undefined; maxZoom?: number | undefined; padding?: number | PaddingOptions | undefined; } | undefined; }) | undefined; gl?: WebGLRenderingContext | undefined; viewState?: (ViewState & { width: number; height: number; }) | undefined; mapStyle?: string | StyleSpecification | ImmutableLike<StyleSpecification> | undefined; styleDiffing?: boolean | undefined; fog?: unknown; light?: LightSpecification | undefined; terrain?: TerrainSpecification | undefined; interactiveLayerIds?: string[] | undefined; cursor?: string | undefined; } & GlobalSettings & { mapLib?: MapLib<Map$1> | Promise<MapLib<Map$1>> | undefined; reuseMaps?: boolean | undefined; id?: string | undefined; style?: CSSProperties | undefined; children?: any; } & RefAttributes<MapRef>'.
  Property 'validateStyle' does not exist on type 'IntrinsicAttributes & { zoom?: number | undefined; bearing?: number | undefined; pitch?: number | undefined; maxZoom?: number | undefined; minZoom?: number | undefined; interactive?: boolean | undefined; minPitch?: number | undefined; maxPitch?: number | undefined; maxBounds?: LngLatBoundsLike | undefined; renderWorldCopies?: boolean | undefined; scrollZoom?: boolean | undefined; boxZoom?: boolean | undefined; dragRotate?: boolean | undefined; dragPan?: boolean | DragPanOptions | undefined; keyboard?: boolean | undefined; doubleClickZoom?: boolean | undefined; touchZoomRotate?: boolean | undefined; touchPitch?: boolean | undefined; localIdeographFontFamily?: string | undefined; pixelRatio?: number | undefined; antialias?: boolean | undefined; attributionControl?: boolean | undefined; bearingSnap?: number | undefined; clickTolerance?: number | undefined; collectResourceTiming?: boolean | undefined; crossSourceCollisions?: boolean | undefined; cooperativeGestures?: boolean | undefined; customAttribution?: string | string[] | undefined; hash?: string | boolean | undefined; fadeDuration?: number | undefined; failIfMajorPerformanceCaveat?: boolean | undefined; locale?: any; logoPosition?: ControlPosition | undefined; preserveDrawingBuffer?: boolean | undefined; pitchWithRotate?: boolean | undefined; refreshExpiredTiles?: boolean | undefined; trackResize?: boolean | undefined; transformRequest?: RequestTransformFunction | undefined; maxTileCacheSize?: number | undefined; maplibreLogo?: boolean | undefined; } & Partial<ViewState> & MapCallbacks & { mapboxAccessToken?: string | undefined; initialViewState?: (Partial<ViewState> & { bounds?: LngLatBoundsLike | undefined; fitBoundsOptions?: { offset?: PointLike | undefined; minZoom?: number | undefined; maxZoom?: number | undefined; padding?: number | PaddingOptions | undefined; } | undefined; }) | undefined; gl?: WebGLRenderingContext | undefined; viewState?: (ViewState & { width: number; height: number; }) | undefined; mapStyle?: string | StyleSpecification | ImmutableLike<StyleSpecification> | undefined; styleDiffing?: boolean | undefined; fog?: unknown; light?: LightSpecification | undefined; terrain?: TerrainSpecification | undefined; interactiveLayerIds?: string[] | undefined; cursor?: string | undefined; } & GlobalSettings & { mapLib?: MapLib<Map$1> | Promise<MapLib<Map$1>> | undefined; reuseMaps?: boolean | undefined; id?: string | undefined; style?: CSSProperties | undefined; children?: any; } & RefAttributes<MapRef>'.

5     <Map validateStyle={false} />
           ~~~~~~~~~~~~~

It seems that Typescript does not recognize the validateStyle option for Map. But, following along the code, it seems like the validateStyle option should be there:

• Map is defined here. The props are of type MapProps.
• export type MapProps = _MapProps<MapOptions, MapStyle, MapCallbacks, MaplibreMap>; source
• The _MapProps is defined here and will include MapInitOptions<MapOptions>
• type MapInitOptions<MapOptions> = Omit<MapOptions,'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'>;. That means that the MapInitOptions should include the validateStyle prop at this moment:
• The MapOptions are originally imported in exports-maplibre.ts from maplibre-gl. That one includes validateStyle!

But I'm still getting the typescript error and I'm not even sure if validateStyle is actually disabled for my map component. Is this a bug or is validateStyle not supported for Map?

I'm using [email protected] and [email protected]