OverlayViewHelper.js:44 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

[davidbarker]

I'm using OverlayViews instead of markers in order to make them completely custom. Everything was working as expected until I started using setState with a callback.

For example, I'm currently doing the following:

this.setState(newState.toJS(), () => {
    this.fitBoundsToResults();
});

which leads to the error:

OverlayViewHelper.js:44 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at Object.mountContainerElementToPane (OverlayViewHelper.js:44)
at Object.draw (OverlayView.js:129)
at _baseDelay.js:18

That appears to be referencing:

function mountContainerElementToPane(mapPanes, containerElement, props) {
    var mapPaneName = props.mapPaneName;

    (0, _invariant2.default)(!!mapPaneName, "OverlayView requires either props.mapPaneName or props.defaultMapPaneName but got %s", mapPaneName);
    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
    mapPanes[mapPaneName].appendChild(containerElement);
}

This only happens the first time I update the results. I'm using Google Places so I get 20 results initially, which creates 20 overlay views, and 20 of the above errors. However, if I then paginate the results and get 20 more results, 20 new overlay views are added to the map but I don't get errors.

If I comment-out the callback, no errors appear (but then the bounds no longer get updated, of course).

Any idea why this might be happening? Or a suggestion on a better way to achieve the bounds change?

[davidbarker]

It's not ideal, but I can avoid the errors if I do the following:

this.setState(newState.toJS(), () => {
    setTimeout(this.fitBoundsToResults, 10);
});

[tomchentw]

Please refer to Getting Help section in the README (or #469).