title: react-map-gl: mapbox not showing
body: <p>I'm using the react-map-gl package from Uber, I have got some problems during the production mode. The map is shown on my local computer but when I deploy the app to vercel the map does not appear and got some errors on the console like down below:</p>
  <p><a href="https://i.stack.imgur.com/qZLIF.jpg" rel="nofollow noreferrer">Here's the screeshot</a></p>
  <p>Any suggestions?
  Here's the relevant section on my code (from the .js file)</p>
  <pre><code>import React, { useState } from 'react';
  import ReactMapGL, { Marker, Popup } from 'react-map-gl';
  import { Link } from 'react-router-dom';
  
  const Map = ({ userLatitude, userLongitude }) =&gt; {
  
    const [selectedPark, setSelectedPark] = useState(null);
    const [viewport, setViewport] = useState({
      latitude: userLatitude,
      longitude: userLongitude,
      zoom: 10,
    });
  
    const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
  
    const renderMarker = data.skateparks.map((skatepark) =&gt; {
      return (
        &lt;Marker
          key={skatepark.id}
          latitude={skatepark.latitude}
          longitude={skatepark.longitude}
          onClick={(e) =&gt; {
            e.preventDefault();
            setSelectedPark(skatepark);
          }}
        &gt;
          &lt;button className='py-2 px-2  '&gt;
            &lt;img src='/marker.svg' alt='Marker' /&gt;
          &lt;/button&gt;
        &lt;/Marker&gt;
      );
    });
  
    const userMarker = data.skateparks.map((skatepark) =&gt; {
      return (
        &lt;Marker
          key={skatepark.id}
          latitude={userLatitude}
          longitude={userLongitude}
        &gt;
          &lt;button className='py-5 px-5 bg-primary-3 rounded-7 text-6 text-primary-2'&gt;
            {!userLatitude &amp;&amp; !userLongitude
              ? 'Allow The Location'
              : 'You Are Here'}
          &lt;/button&gt;
        &lt;/Marker&gt;
      );
    });
  
    return (
      &lt;div id='map'&gt;
        &lt;ReactMapGL
          {...viewport}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          mapStyle='mapbox://styles/gmllshrn/ckvj33j018nc515o2pcsxdbdj'
          width='940px'
          height='90vh'
          onViewportChange={(viewport) =&gt; setViewport(viewport)}
        &gt;
          {userMarker}
          {renderMarker}
          {selectedPark ? (
            &lt;Popup
              className='text-center'
              latitude={selectedPark.latitude}
              longitude={selectedPark.longitude}
              onClose={() =&gt; {
                setSelectedPark(null);
              }}
            &gt;
              &lt;Link to={`/detail/${selectedPark.id}`}&gt;
                &lt;img
                  width='253px'
                  height='147px'
                  src={selectedPark.park_image}
                  alt={selectedPark.park_name}
                  className='mb-5'
                /&gt;
                {selectedPark.park_name}
              &lt;/Link&gt;
            &lt;/Popup&gt;
          ) : null}
        &lt;/ReactMapGL&gt;
      &lt;/div&gt;
    );
  };
  
  export default Map;
  
  </code></pre>
  <p>The only thing missing is that the map does not actually appear on production mode. Thanks in advance for any help provided.</p>