google-map-react: X of undefined on mouse enter / move on map

This still happens with basic example on Github

This is also happening to me, the error message is different though

It happens when implementing the basic example of github, if you remove the markers the error goes away.

I would not consider this issue as solved. The issue still happens when using Async React (^16.10.1) and I cannot toggle <Suspense> in my project, as each route is loaded asynchronously.

App.tsx

import React, { StrictMode, Suspense } from "react";
import { Provider } from "react-redux";
import RootRouter from "./screens/RootRouter";
import store from "./rootStore";

const App: React.FC = () => {
  return (
    <StrictMode>
      <Suspense fallback={<p>Loading…</p>}>
        <Provider store={store}>
          <RootRouter />
        </Provider>
      </Suspense>
    </StrictMode>
  );
};

export default App;

RootRouter.tsx:

import React from "react";
import { Route } from "react-router";
import { HashRouter } from "react-router-dom";

const AsyncIndexScreen = React.lazy(() => {
  return import("./home/IndexScreen");
});

export const RootRouter: React.FC = () => {
  return (
    <HashRouter>
      <Route exact path="/" component={AsyncIndexScreen} />
    </HashRouter>
  );
};

export default RootRouter;

IndexScreen.tsx:

import React from "react";
import GoogleMapReact from "google-map-react";
import Marker from "./Marker";

const markers = [
  { id: "marker_1", lat: 59.955413, lng: 30.337844 },
  { id: "marker_2", lat: 59.966413, lng: 30.366844 },
  { id: "marker_3", lat: 59.923413, lng: 30.333844 },
  { id: "marker_4", lat: 59.927413, lng: 30.318844 }
];

export const IndexScreen: React.FC = () => {
  return (
    <div style={{ height: "75vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={{
          lat: 59.95,
          lng: 30.33
        }}
        defaultZoom={11}
      >
        {markers.map(marker => (
          <Marker
            key={marker.id}
            lat={marker.lat}
            lng={marker.lng}
          />
        ))}
      </GoogleMapReact>
    </div>
  );
};

export default IndexScreen;

I am getting the following errors:

google_map.js:1216 Uncaught TypeError: Cannot read property 'x' of undefined
    at Object.distanceToMouse (google_map.js:1216)
    at google_map_markers.js:217
    at forEachSingleChild (react.development.js:1240)
    at traverseAllChildrenImpl (react.development.js:1134)
    at traverseAllChildrenImpl (react.development.js:1150)
    at traverseAllChildren (react.development.js:1214)
    at Object.forEachChildren [as forEach] (react.development.js:1262)
    at GoogleMapMarkers._this._onMouseChangeHandlerRaf (google_map_markers.js:208)
    at MarkerDispatcher.GoogleMapMarkers._this._onMouseChangeHandler (google_map_markers.js:192)
    at MarkerDispatcher.emit (index.js:149)
    at GoogleMap._this._onMapMouseMove (google_map.js:735)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:465)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:480)
    at executeDispatch (react-dom.development.js:613)
    at executeDispatchesInOrder (react-dom.development.js:638)
    at executeDispatchesAndRelease (react-dom.development.js:743)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:752)
    at forEachAccumulated (react-dom.development.js:724)
    at runEventsInBatch (react-dom.development.js:769)
    at runExtractedPluginEventsInBatch (react-dom.development.js:915)
    at handleTopLevel (react-dom.development.js:5866)
    at batchedEventUpdates$1 (react-dom.development.js:24311)
    at batchedEventUpdates (react-dom.development.js:1460)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5966)
    at attemptToDispatchEvent (react-dom.development.js:6083)
    at dispatchEvent (react-dom.development.js:5986)
    at dispatchUserBlockingUpdate (react-dom.development.js:5956)

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: GoogleMap

@CodeWitchBella I tested it with and without strict mode and it behaved the same, toggling suspense however, did the trick!

I figured it out.

So, the jiggling issue only happens if you wrap the map in <Suspense />,

Removing Suspense, solves the issue.

ALSO: The issue is fully fixed as of "react": "^16.9.0",

Apparently there was a bug in Suspense that was fixed by the react team.

@Umbrellagun Try this out! I am almost sure it’ll solve your issue as well

It works for me, removing StrinctMode in index.js

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  // </React.StrictMode>,
  document.getElementById('root')
);

For me this only occurs in StrictMode

@Umbrellagun I have the same issue, Did you figure out a work around maybe? 🤔 Thanks!

@Bartozzz Hey! Can you show me your index file? How do you mount the App to the dom?

I had issues when I usead UNSAFE_createRoot but now that I simply use the way below, it works fine

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root')
);

Let me know if i can provide further help!

Issue is still present in v1.14

I was finally able to poke this again and I discovered that even just leaving an empty function in place of the distanceToMouse prop you mentioned @A-Tokyo appears to prevent the error from showing. I don’t need this function as far as I know, so it may not be a solution for anyone that is using this, but I just thought it might be helpful to note.

distanceToMouse={()=>{}}

edited: This is working for me in a WordPress/Gutenberg environment, no Async React

@A-Tokyo Not yet, no. I’ll let you know if I get to it though!