compatible with react-mapbox-gl-draw v. 4+ ? map.getStyle error

[ev0065]

Hi all, I am using react-mapbox-gl 4.5.1 and react-mapbox-gl-draw 2.0.1. Referencing this issue and this feature, it seems like react-mapbox-gl-draw is now compatible with react-mapbox-gl version 4+, but I am running into issues when I try to implement the demo. If it is compatible, I would appreciate any help debugging the following error!

Here's my code, and the error is below:

import DrawControl from 'react-mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
// imports 

// ignore the class instantiation, constructor, all that. It works. 

// in the render method: 

<Map
 onStyleLoad={ el => this.map = el} 
 style={this.state.style}
 containerStyle={{
    height: this.state.height,
    width: this.state.width
 }}
 center={[0,0]}
 zoom={[2]} >

     <DrawControl />

</Map>

And here is the error:

index.js:14 Uncaught TypeError: map.getStyle is not a function
    at DrawControl.componentDidMount (index.js:14)
    at commitLifeCycles (react-dom.development.js:14361)
    at commitAllLifeCycles (react-dom.development.js:15462)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at ReactMapboxGl.../../../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
    at r.<anonymous> (map.js:119)
    at r.Ft.fire (mapbox-gl.js:29)
    at r._render (mapbox-gl.js:33)
    at mapbox-gl.js:33

Does anyone have an idea as to why my application crashes right before the map mounts? Thanks!

[amaury1093]

This library should be compatible with all version 4.*.* of react-mapbox-gl. I just updated the dependencies, with react-mapbox-gl-draw@2.0.2 and react-mapbox-gl@4.5.1, everything works: https://codesandbox.io/s/xenodochial-tu-pwly8

[ev0065]

Thanks for double checking that it's compatible. I updated the dependencies but it still isn't working because it is trying to call map.getStyle. Do you have an idea why? @amaurymartiny

[amaury1093]

Hmm, this is weird, I cannot reproduce this.

Can you create a demo project? On codesanbox.io or on another github project?

[ev0065]

Yeah let me try a sandbox and I'll send you the link. I'm looking through the issue you posted on react-mapbox-gl first to see if it gives me any ideas, but will keep you updated! I appreciate the help

[ev0065]

@amaurymartiny
So ... I'm really confused and I have no idea why it's not working. Here's the very simple sandbox mimicking parts of my code. But it's not throwing an issue. In my package.json file, the dependencies have the same exact version as in the sandbox.

I'm not sure if this helps, but as soon as I surround <DrawControl /> within a <MapContext.Consumer>, it doesn't throw an error but I cannot see the draw box.

[amaury1093]

Hmm, like this I'm not sure I can help. If you have a reproducible example, I'm more than happy to dig into it.

This might or might not help you: alex3165/react-mapbox-gl#691 (comment), I don't know if it's related to your issue.

[ev0065]

Yeah, I understand that there's not much to do if I can't reproduce it. It seems like this comment on your past issue seems related to my issue. I might reach out to him and see if he got it to work. I appreciate your help though!

[ev0065]

@amaurymartiny If i'm able to strip all the junk from my code and send it to you in an email, would you be willing/have the time to look at it quickly? I'm curious because I just stripped everything useless and I'm still running into the issue

edit: I can also post it here. It's very little code. The good thing is that now I know that none of my other code is causing issues - it might be my environment.

[amaury1093]

Sure, that sounds good. Or even better, just create a new github repository, so that i can git clone; yarn install; yarn start to repro

[ev0065]

Will do. Dumb question first: I've been using npm install instead of yarn install. I know of yarn and all about it, but have not used it. That shouldn't cause an issue, right?

[amaury1093]

Both should work equally well, i just have a personal preference for yarn

[ev0065]

So just to let you know: i never figured out the error and decided to try one last thing before the github repo. I added a <MapContext.Consumer> tag, and within that, just did map.addControl(new MapboxDraw(), 'top-left') (which worked (!)). I'm really not sure why react-mapbox-gl-draw wasn't working, but I'll probably revisit it within the next couple of weeks to make my code neater.

Either way, thanks for your help trying to work through the issue!