React-mapbox-gl: GeoJSONLayer does not work with style-update

[pcraciunoiu]

Initially in my code, I was getting this (doesn't happen in this example PR).

geojson-layer.js:77 Uncaught TypeError: Cannot read property 'setData' of undefined
    at GeoJSONLayer.componentWillReceiveProps (geojson-layer.js:77)

Fails right here:

    if (props.data !== data) {
      (map.getSource(id) as MapboxGL.GeoJSONSource).setData(props.data);
    }

map.getSource(id) is returning undefined.

I tried cloning the library and updating the example to show this:
https://github.com/alex3165/react-mapbox-gl/pull/260

In the example, there are no errors in the console, but the layer is not re-rendered. If you check out that branch and go to the "Style update" tab, you can see what I'm talking about.

If you switch the style the GEOJSONLayer is NOT re-rendered.

[alex3165]

Hey, Thank you for the issue I will handle this with the v2.0.0 milestone

[alex3165]

https://github.com/alex3165/react-mapbox-gl/pull/269 should fix it

[pcraciunoiu]

@alex3165 are there breaking changes if I upgrade to 2.0.0?

Should I wait to run off of that branch or is it stable?

[alex3165]

I have released v2 under @next tag on npm, you can try out with npm i react-mapbox-gl@next, the API changed a bit, have a look at the new documentation: https://github.com/alex3165/react-mapbox-gl/blob/v2.0.0/docs/API.md

[alex3165]

2.0.3 is release as a main tag, GeoJsonLayer should now be updated correctly

[pcraciunoiu]

@alex3165 this seems to work, but I am still getting the error when I switch styles (once each style change).
Uncaught TypeError: Cannot read property 'setData' of undefined at GeoJSONLayer.componentWillReceiveProps (geojson-layer.js:93)

Seems to happen here on the line with getSource:

    if (props.data !== data) {
      (map.getSource(id) as MapboxGL.GeoJSONSource).setData(props.data);
    }

Wondering if I am doing something odd, but it doesn't seem like it. The code for the layer looks like this:

<Map ...>
          <GeoJSONLayer
            data={generateDirectionArrow(...currentLocation, direction, zoom)}
            fillPaint={currentLocationDirectionStyles}
          />
</Map>

[alex3165]

@pcraciunoiu Hum could you reproduce the issue with https://github.com/alex3165/react-mapbox-gl-debug ? that would be very helpful

[ptrikutam]

@alex3165 I am working with @pcraciunoiu above, and having the same issue as him in our dev environment.

I tried running https://github.com/alex3165/react-mapbox-gl-debug and wasn't able to start up the app:

ReactBaseClasses.js:27 Uncaught TypeError: Cannot set property 'props' of undefined
    at ReactComponent (ReactBaseClasses.js:27)
    at ReactMapboxGl (map.js:50)
    at Object.<anonymous> (App.js:7)
    at __webpack_require__ (bootstrap 327ebbf…:555)
    at fn (bootstrap 327ebbf…:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap 327ebbf…:555)
    at fn (bootstrap 327ebbf…:86)
    at Object.<anonymous> (bootstrap 327ebbf…:578)
    at __webpack_require__ (bootstrap 327ebbf…:555)
    at bootstrap 327ebbf…:578
    at bootstrap 327ebbf…:578

What am I doing incorrectly?

[alex3165]

@ptrikutam Sorry for that I thought I updated react-mapbox-gl to 2.0 but actually didn't. It should work now if you pull. If you can isolate the bug I will work on it asap thanks

[alex3165]

Any update on this? I have set up a small webpackbin boilerplate with a button that update the style and a GeoJsonLayer component inside it but couldn't reproduce the issue. If you can reproduce it please create a new issue with the link to the corresponding webpackbin.

[alex3165]

Released a fix from @SBRK with version 2.5.2

[ptrikutam]

@alex3165 Apologies for the extreme delay in responding! Thanks for following up and being diligent.

[alex3165]

@ptrikutam No need to apologies! I hope this will fix your issue! Thanks