Q:

react-leaflet mapboxgl integration not working

following the answer in this page : 
Render mapbox vector tiles inside react-leaflet?
When i export MapBoxGLLayer and import it to my main class,
like 
import MapBoxGLLayer from './MapBoxGLLayer';

and try to access it in my render function, like:
<Map>
  <MapBoxGLLayer
    accessToken={MAPBOX_ACCESS_TOKEN}
    style='https://style.example.com/style.json'
  />
</Map>

i'm getting this error which is pretty consistent. 
MapLayer.js:77 Uncaught TypeError: Cannot read property 'layerContainer' of undefined
at VectorgridLayer.get (MapLayer.js:77)
at VectorgridLayer.componentDidMount (MapLayer.js:38)

There is no leaflet to the props.

I don't know what am I doing wrong here.

A:

Taking hints from the answer you mentioned, I was able to get it working.
Your MapBoxGLLayer.js 
import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";

class MapBoxGLLayer extends GridLayer {
  createLeafletElement(props){
    return L.mapboxGL(props);
  }
}

export default withLeaflet(MapBoxGLLayer);  

The missing thing was the withLeaflet HOC.  
Usage: 
npm i mapbox-gl-leaflet  

Add mapbox-gl-js and css to index.html
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />  

// Import the MapBoxGLLayer component mentioned above.
class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <MapBoxGLLayer
            accessToken={MAPBOX_ACCESS_TOKEN}
            style="mapbox://styles/mapbox/streets-v9"
          />
        </Map>
      </div>
    );
  }
}  

You can find the working example here:https://codesandbox.io/s/ooypokn26y
Add your own mapbox token to see it working.

