react-map-gl icon indicating copy to clipboard operation
react-map-gl copied to clipboard

TypeError when adding images

Open oselz opened this issue 6 years ago • 3 comments

We are hitting a bug where mapbox-gl is generating an exception by trying to call this.style.addImage where style is undefined.

Unfortunately I haven't been able to reproduce this in a dev environment, and only have our sentry logs for info. I suspect it is a race whereby react-map-gl is trying to load images before the map has finished loading. Here is a typical trace from sentry:

TypeError - Cannot read property 'addImage' of undefined

./node_modules/mapbox-gl/dist/mapbox-gl.js in addImage at line 33:293299
{snip}  n=t.browser.getImageData(i),s=n.width,l=n.height,c=n.data;this.style.addImage(e,{data:new t.RGBAImage({width:s,height:l},c),pixelRatio:r,sd {snip}

./node_modules/@urbica/react-map-gl/dist/react-map-gl.esm.js in e at line 1:16823
{snip} image,r=e.pixelRatio,n=e.sdf;this._loadImage(o,function(e){return t._map.addImage(t._id,e,{pixelRatio:r,sdf:n})})},r.componentDidUpdate=func {snip}

I am happy to keep debugging this to a find a fix and create a PR, but need some feedback about how you think it should be handled.

react-map-gl Image has a guard for this situation in componentWillUnmount (!this_map.getStyle()), which could be replicated in componentDidUpdate and componentDidMount.

Or is there a higher level check needed before trying to create children - I guess this situation could be hit by other components?

oselz avatar Dec 12 '19 22:12 oselz

Hi @oselz! Thanks for filling the issue for this. We will try to figure it out as soon as we can.

/cc @device25

stepankuzmin avatar Dec 13 '19 07:12 stepankuzmin

@oselz thank you for your feedback. Could you please give more information about this bug? – os – browser

device25 avatar Dec 13 '19 09:12 device25

@device25 we have seen this on both Windows 10 & Mac OSX, Chrome 78.

kbrownlees avatar Jan 12 '20 20:01 kbrownlees