title: How to use maplibre-gl with react-map-gl
body: <p>I am currently taking my first steps in using <a href="https://maplibre.org/maplibre-gl-js-docs/api/" rel="nofollow noreferrer">maplibre</a> together with react-map-gl.</p>
  <p>I have read the <a href="https://visgl.github.io/react-map-gl/docs/get-started/get-started#using-with-a-mapbox-gl-fork" rel="nofollow noreferrer">documentation</a> about how to use a fork of mapbox.</p>
  <p>I have adapted <code>webpack-config</code>. I use a <a href="https://github.com/facebook/create-react-app" rel="nofollow noreferrer">create-react-app</a> project with <a href="https://www.npmjs.com/package/react-app-rewired" rel="nofollow noreferrer">rewind</a>. This is my config-overrides.js.</p>
  <pre><code>module.exports = function override(config, env) {
      //do stuff with the webpack config...
      module.exports = {
          webpack: (config) =&gt; {
              config.module.rules.push({
                  resolve:{
                      alias: {
                          ...config.resolve.alias,
                          'mapbox-gl': 'maplibre-gl'
                      }
                  }
              })
            // Important: return the modified config
            return config
          },
        }
      return config;
    }
  
  </code></pre>
  <p>With the following  code I see the map from Maptiler  a few seconds, which is loaded via maplibre.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactMapGL from &quot;react-map-gl&quot;;
  
  export const Map = () =&gt; {
    const [mapViewport, setMapViewport] = useState({
      height: &quot;100vh&quot;,
      width: &quot;100wh&quot;,
      longitude: 2.571606,
      latitude: 45.226913,
      zoom: 5
    });
  
    return (
      &lt;ReactMapGL
        {...mapViewport}
        //mapboxApiAccessToken=&quot;MapboxToken&quot;
        mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
        onViewportChange={setMapViewport}
      &gt;&lt;/ReactMapGL&gt;
    );
  };
  
  </code></pre>
  <p>Then it disappears and I see this error message in the console of my browser.</p>
  <pre><code>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/
  </code></pre>
  <p>If I use the line  <code>mapboxApiAccessToken=&quot;MapboxToken&quot;</code>, I can use the maptiler map without a problem.</p>
  <pre><code> import React, { useState } from &quot;react&quot;;
  import ReactMapGL from &quot;react-map-gl&quot;;
  
  export const Map = () =&gt; {
    const [mapViewport, setMapViewport] = useState({
      height: &quot;100vh&quot;,
      width: &quot;100wh&quot;,
      longitude: 2.571606,
      latitude: 45.226913,
      zoom: 5
    });
  
    return (
      &lt;ReactMapGL
        {...mapViewport}
        mapboxApiAccessToken=&quot;MapboxToken&quot;
        mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
        onViewportChange={setMapViewport}
      &gt;&lt;/ReactMapGL&gt;
    );
  };
  
  </code></pre>
  <p>But I don't want to need a mapbox token any more.
  What am I missing ?</p>
  <p>I asked this question <a href="https://github.com/visgl/react-map-gl/discussions/1482" rel="nofollow noreferrer">here</a> as well.</p>