How to use react-map-gl with maplibre-gl

[astridx]

I am currently taking my first steps in using maplibre together with react-map-gl.

I have read the documentation about how to use a fork of mapbox.

I have adapted webpack-config. I use a create-react-app project with rewind. This is my config-overrides.js.

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    module.exports = {
        webpack: (config) => {
            config.module.rules.push({
                resolve:{
                    alias: {
                        ...config.resolve.alias,
                        'mapbox-gl': 'maplibre-gl'
                    }
                }
            })
          // Important: return the modified config
          return config
        },
      }
    return config;
  }

With the following code I see the map from Maptiler a few seconds, which is loaded via maplibre.

import React, { useState } from "react";
import ReactMapGL from "react-map-gl";

export const Map = () => {
  const [mapViewport, setMapViewport] = useState({
    height: "100vh",
    width: "100wh",
    longitude: 2.571606,
    latitude: 45.226913,
    zoom: 5
  });

  return (
    <ReactMapGL
      {...mapViewport}
      //mapboxApiAccessToken="MapboxToken"
      mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
      onViewportChange={setMapViewport}
    ></ReactMapGL>
  );
};

Then it disappears and I see this error message in the console of my browser.

Error: A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/

If I use the line mapboxApiAccessToken="MapboxToken", I can use the maptiler map without a problem.

 import React, { useState } from "react";
import ReactMapGL from "react-map-gl";

export const Map = () => {
  const [mapViewport, setMapViewport] = useState({
    height: "100vh",
    width: "100wh",
    longitude: 2.571606,
    latitude: 45.226913,
    zoom: 5
  });

  return (
    <ReactMapGL
      {...mapViewport}
      mapboxApiAccessToken="MapboxToken"
      mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
      onViewportChange={setMapViewport}
    ></ReactMapGL>
  );
};

But I don't want to need a mapbox token any more.
What am I missing ?

I asked this question here as well.

[Pessimistress]

Not familiar with your setup, but your config override does not work. One would never rewrite module.exports in a function. You should print your manipulated config object to console to make sure that your manipulation code is actually called.

[astridx]

Thank you very much for your reply. And sorry for opening this issue. You are right - I was looking at the wrong place . The override was the problem. The config-overrides.js should look like this

module.exports = function override(config, env) {
    config.module.rules.push({
        resolve:{
            alias: {
                ...config.resolve.alias,
                'mapbox-gl': 'maplibre-gl'
            }
        }
    })

    return config
}