react-map-gl-geocoder: Adding Geocode component generates bunch of errors

The errors occur only when adding the Geocoder component.

import React from "react"

import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css"
import "mapbox-gl/dist/mapbox-gl.css"

import ReactMapGL from "react-map-gl"
import Geocoder from "react-map-gl-geocoder"


export default function StationMap() {
  const settings = {
    dragPan: true,
    dragRotate: true,
    scrollZoom: false,
    touchZoom: true,
    touchRotate: true,
    keyboard: true,
    doubleClickZoom: true,
    minZoom: 0,
    maxZoom: 20,
    minPitch: 0,
    maxPitch: 85,
  }

  const [viewport, setViewport] = React.useState({
    latitude: 42.444,
    longitude: -76.5019,
    zoom: 8,
    width: "100%",
    height: "100%",
  })


  const myMap = React.createRef()

  return (
   <ReactMapGL
     ref={myMap}
     {...viewport}
     {...settings}
     mapboxApiAccessToken={process.env.GATSBY_MAPBOX_TOKEN}
     mapStyle="mapbox://styles/mapbox/streets-v11"
     onViewportChange={viewport => setViewport(viewport)}
   >
     <Geocoder
       mapRef={myMap}
       mapboxApiAccessToken={process.env.GATSBY_MAPBOX_TOKEN}
     >
     </Geocoder>
</ReactMapGL>
  )
}

The log with the errors:

index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
    at i.e.initializeGeocoder (index.m.js:1)
    at i.o.componentDidMount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at commitLifeCycles (react-dom.development.js:21963)
    at commitLayoutEffects (react-dom.development.js:25287)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:25023)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.m.js:1 Uncaught TypeError: Cannot read property 'remove' of undefined
    at Gt.off (index.m.js:1)
    at i.e.unsubscribeEvents (index.m.js:1)
    at i.e.removeGeocoder (index.m.js:1)
    at i.o.componentWillUnmount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at callComponentWillUnmountWithTimer (react-dom.development.js:21756)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at safelyCallComponentWillUnmount (react-dom.development.js:21763)
    at commitUnmount (react-dom.development.js:22256)
    at commitNestedUnmounts (react-dom.development.js:22350)
    at unmountHostComponents (react-dom.development.js:22682)
    at commitDeletion (react-dom.development.js:22768)
    at commitMutationEffects (react-dom.development.js:25266)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:24989)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
off @ index.m.js:1
e.unsubscribeEvents @ index.m.js:1
e.removeGeocoder @ index.m.js:1
o.componentWillUnmount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
callComponentWillUnmountWithTimer @ react-dom.development.js:21756
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
safelyCallComponentWillUnmount @ react-dom.development.js:21763
commitUnmount @ react-dom.development.js:22256
commitNestedUnmounts @ react-dom.development.js:22350
unmountHostComponents @ react-dom.development.js:22682
commitDeletion @ react-dom.development.js:22768
commitMutationEffects @ react-dom.development.js:25266
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:24989
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 7 more frames
index.js:2177 The above error occurred in the <i> component:
    in i (at stationsMap.js:68)
    in div (created by Context.Consumer)
    in div (created by AutoSizer)
    in AutoSizer (created by StaticMap)
    in div (created by StaticMap)
    in StaticMap (created by InteractiveMap)
    in div (created by InteractiveMap)
    in InteractiveMap (at stationsMap.js:59)
    in div (at stationsMap.js:47)
    in div (at stationsMap.js:37)
    in StationMap (at pages/index.js:63)
    in div (at pages/index.js:62)
    in div (at pages/index.js:60)
    in section (at pages/index.js:59)
    in main (at layout.js:24)
    in Layout (at pages/index.js:15)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in SessionCheck (at gatsby-browser.js:75)
    in _default (at app.js:67)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
callback @ react-dom.development.js:23144
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.js:2177 TypeError: Cannot read property 'addControl' of null
    at i.e.initializeGeocoder (index.m.js:1)
    at i.o.componentDidMount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at commitLifeCycles (react-dom.development.js:21963)
    at commitLayoutEffects (react-dom.development.js:25287)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:25023)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219) "
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Context.Consumer (created by Location)
    in Location (at root.js:118)
    in Root (at root.js:126)"
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
error @ react-hot-loader.development.js:294
componentDidCatch @ react-hot-loader.development.js:2401
callback @ react-dom.development.js:23149
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
    at i.e.initializeGeocoder (index.m.js:1)
    at i.o.componentDidMount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at commitLifeCycles (react-dom.development.js:21963)
    at commitLayoutEffects (react-dom.development.js:25287)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:25023)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.js:2177 The above error occurred in the <AppContainer> component:
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in SessionCheck (at gatsby-browser.js:75)
    in _default (at app.js:67)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
callback @ react-dom.development.js:23144
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
    at i.e.initializeGeocoder (index.m.js:1)
    at i.o.componentDidMount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at commitLifeCycles (react-dom.development.js:21963)
    at commitLayoutEffects (react-dom.development.js:25287)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:25023)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.js:2177 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in SessionCheck (at gatsby-browser.js:75)
    in _default (at app.js:67)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
update.callback @ react-dom.development.js:23108
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:22022
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
    at i.e.initializeGeocoder (index.m.js:1)
    at i.o.componentDidMount (index.m.js:1)
    at i.<anonymous> (react-hot-loader.development.js:704)
    at commitLifeCycles (react-dom.development.js:21963)
    at commitLayoutEffects (react-dom.development.js:25287)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:467)
    at commitRootImpl (react-dom.development.js:25023)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at commitRoot (react-dom.development.js:24864)
    at finishSyncRender (react-dom.development.js:24250)
    at performSyncWorkOnRoot (react-dom.development.js:24222)
    at react-dom.development.js:12239
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
    at flushSyncCallbackQueue (react-dom.development.js:12222)
    at flushPassiveEffectsImpl (react-dom.development.js:25367)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12189)
    at flushPassiveEffects (react-dom.development.js:25304)
    at react-dom.development.js:25183
    at workLoop (scheduler.development.js:759)
    at flushWork (scheduler.development.js:714)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 23 (8 by maintainers)

Most upvoted comments

I switched to React.useRef instead and it works, no need to convert to a class component. Thanks a lot!

+3
alexsinfarosa on Nov 1, 2019

I found the solution:

<MapGL
    ref={mapRef}
    {...viewport}
    width="100%"
    height="100%"
    onViewportChange={handleViewportChange}
    mapboxApiAccessToken={MAPBOX_TOKEN}
  >
      {mapRef.current ? (
        <Geocoder
          mapRef={mapRef}
          onViewportChange={handleGeocoderViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          position="top-left"
        />
      ) : null}
</MapGL>

I tried with @mapbox/mapbox-gl-geocoder and I realized that I was getting the same error until I added the condition. It requires some ms to update the mapRef.

+1
georgioslymperisdjakne on Oct 11, 2022

it’s not working with next.js

any help since?

+1
David05500 on Feb 4, 2021
Read more comments on GitHub
← hass-smartthinq: smartthinq: Error on device update! (self._ac.get_power())
react-map-gl-geocoder: viewport-mercator-project: assertion failed. →