React-google-maps: OverlayViewHelper.js:122 Uncaught TypeError: Cannot read property ‘parentNode’ of undefined

[HannahCarney]

Receiving this error on production rollbar with no ability to replicate. Problem is coming from this code base, and reportedly causes a white screen which resolves on refresh.

OverlayViewHelper.js:122 Uncaught TypeError: Cannot read property ‘parentNode’ of undefined
at Object.h [as unmountAndDestroyContainerElement] (OverlayViewHelper.js:122)
at Object.onRemove (OverlayView.js:137)
at qu.ug (overlay.js:4)
at su (overlay.js:1)
at Object.xk (overlay.js:5)
at js?key=AIzaSyCbtQD4xjpQ7HEzTvLb2Ea2Bf6cCD24HUs:146
at Object._.S (js?key=AIzaSyCbtQD4xjpQ7HEzTvLb2Ea2Bf6cCD24HUs:62)
at Object._.ag.map_changed (js?key=AIzaSyCbtQD4xjpQ7HEzTvLb2Ea2Bf6cCD24HUs:146)
at Lc (js?key=AIzaSyCbtQD4xjpQ7HEzTvLb2Ea2Bf6cCD24HUs:51)
at Object._.m.set (js?key=AIzaSyCbtQD4xjpQ7HEzTvLb2Ea2Bf6cCD24HUs:120)

[gson88]

@HannahCarney
I have the same problem. Google updated their maps API tonight ( https://groups.google.com/forum/#!topic/google-maps-js-api-v3-notify/JKGnj4hTiFA , https://developers.google.com/maps/documentation/javascript/new-renderer )
If you have this problem you can temporarily use the older version of the google maps API by adding v=3.31 in the url, i.e. https://maps.googleapis.com/maps/api/js?v=3.31&key={key} , until this repo is updated to match googles changes.

[ping4tucker]

@gson88 v=3.30 was the previous frozen version. That one has now gone away. v=3.31 is the new frozen version and doesn't use the new map/renderer.

[intelcoder]

I made pull request for the issue. pull request
It fixes the issue for me.

[gson88]

@ping4tucker Yes sorry, updated my response

[HannahCarney]

I can confirm that @gson88 and @ping4tucker solution solved the problem. Haven't seen this error in production since updated :)

[urikphytech]

I'm getting this error too, and google have now retired version 3.30 and 3.31. Is this library planning to support the new renderer? @tomchentw anything I can help with?
Thanks

[websmith]

Seeing this error as well with version 3.30 and 3.31. It only happens for me on the second time an OverlayView is rendered.

[ping4tucker]

@websmith I believe if you are requesting 3.30 or 3.31, you aren't being served that version. You are getting one of the current versions: 3.32, 3.33, or 3.34; I'm not sure which one.

https://developers.google.com/maps/documentation/javascript/versions

[websmith]

@ping4tucker Thank you for the quick reply.

If I'm explicitly requesting v3.30, why would google serve a different version?

Here's what I am requesting:

https://maps.googleapis.com/maps/api/js?v=3.30&key=xxxx

I verified this is the script being loaded in my document. Additionally, I'm also seeing Google's retired version message in the console:

Google Maps JavaScript API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version

Am I misunderstanding?

[ping4tucker]

@websmith You can subscribe to this google group that will notify you about upcoming api version changes: https://groups.google.com/forum/#!topic/google-maps-js-api-v3-notify/UmUZ3Kh0eTY

3.31 will be deprecated and you will be served an existing version if you try to request it.

In addition to that, the version documentation I linked above says that you can only specify versions 3.32, 3.33, 3.34. It also mentions at the very bottom that they deleted the documentation for 3.30 and 3.31.

I don't know all the reasons why google doesn't allow devs to keep using the old versions, but they don't.

[websmith]

thanks @ping4tucker If I can come up with a solution here for the new renderer I will submit a PR

[websmith]

If anyone else is experiencing this issue, I was able to resolve by removing the key={Math.random()} prop from the component declaration.

<OverlayView
//key={Math.random()} //removing this solved the issue
position={{lat:this.lat, lng:this.lng}}
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
>
...
</OverlayView>

[andreiho]

@websmith @ping4tucker I'm experiencing the same issue. Requesting 3.34 version, output of window.google.maps.version is 3.34.1a. Removing the key parameter doesn't solve the issue. Just to understand, this is an issue with the Maps API or with react-google-maps?

[andreiho]

A workaround is wrapping the OverlayView component in a custom component and overwriting the onRemove method to suppress the error.

export default class CustomOverlayView extends OverlayView {
  onRemove() {
    if (this.containerElement) {
      super.onRemove();
    }
  }
}