Unable to add editor

[cdpwest]

When I try to add the Editor to a map in the following way:

` <MapGL {...viewport} width="100%" height="100%" mapStyle={'mapbox://styles/mapbox/light-v9'}

    onViewportChange={setViewport}
  >
    <Editor
      // to make the lines/vertices easier to interact with
      clickRadius={12}
      mode={mode}
    />
  </MapGL>

`

I get the following errors:

`mode-handler.tsx:540 Uncaught TypeError: Cannot read properties of undefined (reading 'Consumer') at Editor.render (mode-handler.tsx:540:1) at finishClassComponent (react-dom.development.js:17485:1) at updateClassComponent (react-dom.development.js:17435:1) at beginWork (react-dom.development.js:19073:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1) render @ mode-handler.tsx:540 finishClassComponent @ react-dom.development.js:17485 updateClassComponent @ react-dom.development.js:17435 beginWork @ react-dom.development.js:19073 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 performUnitOfWork @ react-dom.development.js:22776 workLoopSync @ react-dom.development.js:22707 renderRootSync @ react-dom.development.js:22670 performSyncWorkOnRoot @ react-dom.development.js:22293 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 dispatchAction @ react-dom.development.js:16139 (anonymous) @ map.tsx:106 Promise.then (async) (anonymous) @ map.tsx:81 invokePassiveEffectCreate @ react-dom.development.js:23487 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 flushPassiveEffectsImpl @ react-dom.development.js:23574 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushPassiveEffects @ react-dom.development.js:23447 (anonymous) @ react-dom.development.js:23324 workLoop @ scheduler.development.js:417 flushWork @ scheduler.development.js:390 performWorkUntilDeadline @ scheduler.development.js:157 react-dom.development.js:20085 The above error occurred in the component:

at Editor (http://localhost:3001/static/js/bundle.js:93716:5)
at div
at http://localhost:3001/static/js/bundle.js:96019:79
at App (http://localhost:3001/static/js/bundle.js:87:53)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20118 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20736 commitLayoutEffects @ react-dom.development.js:23426 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23151 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 dispatchAction @ react-dom.development.js:16139 (anonymous) @ map.tsx:106 Promise.then (async) (anonymous) @ map.tsx:81 invokePassiveEffectCreate @ react-dom.development.js:23487 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 flushPassiveEffectsImpl @ react-dom.development.js:23574 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushPassiveEffects @ react-dom.development.js:23447 (anonymous) @ react-dom.development.js:23324 workLoop @ scheduler.development.js:417 flushWork @ scheduler.development.js:390 performWorkUntilDeadline @ scheduler.development.js:157 map.tsx:62 TypeError: Cannot read properties of undefined (reading 'Consumer') at Editor.render (mode-handler.tsx:540:1) at finishClassComponent (react-dom.development.js:17485:1) at updateClassComponent (react-dom.development.js:17435:1) at beginWork (react-dom.development.js:19073:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1)`

[bvitlas]

any solutions for this error?

[adurhmn]

Same error occurs to me. Works fine when used with react-map-gl@^6. But shows this error when used with react-map-gl@^7

[Rakiah]

same issue

[massimopalmieri]

has anyone found a solution to this?

[timminata]

Also having this issue 😞

[zerocool14pvo]

same issue

[d-vorobyov]

same issue

[Ivan-Corporation]

Looks like support for react-map-gl-draw in its current state no longer exist from v7. You can downgrade react-map-gl to v5/v6 or use plugin from mapbox itself - https://github.com/mapbox/mapbox-gl-draw There example from their docs - https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/