How to use it with CRA?

[DavideVito]

Hi,
I've tried to import your Control Example into a brand new Create React App application, but the map doesn't render into the dom, how can I solve?

Here is my code, can u please help me solving the problem?

import MapGL, {
  Popup,
  NavigationControl,
  FullscreenControl,
  ScaleControl, GeolocateControl,

} from 'react-map-gl';

...

 const [viewport, setViewport] = useState({
    latitude: 40,
    longitude: -100,
    zoom: 3.5,
    bearing: 0,
    pitch: 0
  });
  const [popupInfo, setPopupInfo] = useState(null);


return (            
  <MapGL
    {...viewport}
     width="100%"
     height="100%"
     mapStyle="mapbox://styles/mapbox/dark-v9"
     onViewportChange={setViewport}
     mapboxApiAccessToken={TOKEN}
   >
    <Suspense fallback={<div>Loading Events</div>}>
     <Pins onClick={setPopupInfo} />
    </Suspense>


    {
     popupInfo && (
     <Popup
      tipSize={5}
      anchor="top"
      longitude={popupInfo.location.longitude}
      latitude={popupInfo.location.latitude}
      closeOnClick={false}
      onClose={setPopupInfo}
     >
      <EventsInfo info={popupInfo} />
     </Popup>
     )}

      <GeolocateControl style={geolocateStyle} />
      <FullscreenControl style={fullscreenControlStyle} />
      <NavigationControl style={navStyle} />
      <ScaleControl style={scaleControlStyle} />

      <GeolocateControl
       style={geolocateStyle}
       positionOptions={positionOptions}
       trackUserLocation
       auto
      />
  </MapGL> 
)

[I-keep-trying]

@DavideVito

I'm not on the team or anything, but I was looking for help with something else here (getting frustrated with that lol) and noticed that nobody answered you yet. Here's the map component from my own CRA app, which I finally got working today. I started by copying a repo I found on github, and also got help from reactiflux (discord) or I would never in a million years have figured out how to use this in CRA.

import React, { useState } from 'react'
import { isMobile } from 'react-device-detect'
import ReactMapGL from 'react-map-gl'

const MapView = ({ lat, lng }) => {
  const [viewport, setViewport] = useState({
    latitude: 45,
    longitude: 73,
    zoom: 7,
  })

  const mapStyle = {
    width: '100%',
    height: 350,
  }

  return (
    <div>
      {!isNaN(lat) ? (
        <ReactMapGL
          eventRecognizerOptions={eventRecognizerOptions}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          mapStyle="mapbox://styles/mapbox/streets-v11"
          {...mapStyle}
          {...viewport}
          onViewportChange={(viewport, mapStyle) => {
            setViewport({ ...viewport, latitude: lat, longitude: lng })
          }}
        />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  )
}

export default MapView