[Bug] Map with maplibre-gl@next as mapLib throws error because maplibregl has no more `unsupported` method

[viliket]

Description

Upcoming maplibre-gl next major version 3 (maplibre-gl@3.0.0-pre.6) introduced the following breaking change: https://github.com/maplibre/maplibre-gl-js/pull/2451

[Breaking] Remove "mapbox-gl-supported" package from API. If needed, please reference it directly instead of going through MapLibre. (https://github.com/maplibre/maplibre-gl-js/pull/2451)

This breaking change causes problems with react-map-gl because the Map component assumes that the used mapLib provides the supported method: https://github.com/visgl/react-map-gl/blob/9a5339f357840084d9dfd27a298d3ffe9f3e1176/src/components/map.tsx#L67

Because of this issue, the map fails to display and throws the following error

TypeError: mapboxgl.supported is not a function

Workaround

The issue can be circumvented using the following workaround:

import maplibregl from "maplibre-gl";
...
maplibregl.supported = () => true;

Proposed solution

Map component line https://github.com/visgl/react-map-gl/blob/9a5339f357840084d9dfd27a298d3ffe9f3e1176/src/components/map.tsx#L67 could be changed to

if (mapboxgl.supported ? mapboxgl.supported(props) : true) {

so we do not test for supported if the mapLib does not provide it.

Expected Behavior

Using the latest maplibre-gl as mapLib should work with react-map-gl.

Steps to Reproduce

See the following Code Sandbox to reproduce the behavior: https://codesandbox.io/s/jolly-sea-3ifhm8

Note that you can see that the problem in the Code Sandbox example can be circumvented by uncommenting the line

// Temp fix below:
// maplibregl.supported = () => true;

Environment

• Framework version: react-map-gl@7.0.23
• Map library: maplibre-gl@3.0.0-pre.6
• Browser: Chrome 113.0 / Firefox 111.0
• OS: Windows 10

Logs

No response

[dBitech]

maplibre-gl 3.0.0 was released today and is the version that is pulled in by default now.

[KiwiKilian]

Proper workaround with the actual supported function would be to install:

npm install @mapbox/mapbox-gl-supported --save

And add it to the map implementation:

import maplibregl from 'maplibre-gl';
import { supported } from '@mapbox/mapbox-gl-supported';

const maplibreglWithSupported = { ...maplibregl, supported };

const MyMap = () => (
  <Map mapLib={maplibreglWithSupported} />
);

[dBitech]

Proper workaround with the actual supported function would be to install:

npm install @mapbox/mapbox-gl-supported --save

And add it to the map implementation:

import maplibregl from 'maplibre-gl';
import { supported } from '@mapbox/mapbox-gl-supported';

const maplibreglWithSupported = { ...maplibregl, supported };

const MyMap = () => (
  <Map mapLib={maplibreglWithSupported} />
);

This is confirmed as working, Docs should be updated to reflect this method

[viliket]

I would still consider making react-map-gl not assuming/requiring the given mapLib to have the supported method at all as the original library has been stale for 3 years as mentioned in https://github.com/maplibre/maplibre-gl-js/discussions/2452#discussion-5134538

This library has not had any meaningful update for 3 years and is becoming stale. Anyone out there who still needs it can easily reference or add to their repo instead of using MapLibre as the middleman.

Otherwise everyone using react-map-gl with maplibre-gl is forced to either patch the map library object given to mapLib either using the stale original library @mapbox/mapbox-gl-supported or using a dummy implementation.

[Pessimistress]

Fix published in v7.0.24.