0

I have a React app with a webpack build. I am using Webpack HMR using React-Hot-Loader. I configured it as the documentation, and everything is working fine except for one place.

I have a non-react library to display map from map-box API (mapbox-gl).

In the react component, I create a <div> with ref, and initialize the mapbox-gl code into the ComponentDidMount method. I run this code on ComponentDidMount:

ComponentDidMount() {

    const map = new mapboxgl.Map({
          container: this._map_div_ref,
           .....
        })
}

When this map is used in webpack-HMR, the code on ComponentDidMount doesn't run, so when the HMR update the browser, it empty the map_div

Is there a way to tell webpack-HMR to run that code?

Ghassan Karwchan
  • 3,355
  • 7
  • 37
  • 65

1 Answers1

0

Try moving your map instantiation above your class header but below your imports. For example: 

import React ...

const map = new mapboxgl.Map({
// map options 
)}

class Map extends Component {

Edit: Have you also considered using a react wrapper for Mapbox, such as react-mapbox-gl or react-map-gl? I would look into those to see if it would be easier to display and play around with the map. I currently use react-mapbox-gl, but I am unaware of how well it would work with Webpack HMR.

lve
  • 307
  • 2
  • 5
  • 15
  • unfortunately, it is not that easy to use the react wrapper for mapbox-gl (react-mapbox-gl). the team told me that this wrapper didn't support what they wanted to do. Back to your suggestion, I cannot do that, because I have to pass to the mapbox the div name which I am getting from the React's Ref property that I am creating. – Ghassan Karwchan Jul 10 '19 at 23:56