google-map-react not loading- Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')

Question

import React from "react";
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function AppMapPage() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "my key" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" />
      </GoogleMapReact>
    </div>
  );
}

I have been trying to solve it for a while. I am trying to run simple example of google-map-react. But, This does not load maps. Instead gives following errors and the page is blank.

google_map_markers.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
    at o._getState (google_map_markers.js:100:1)
    at new o (google_map_markers.js:248:1)
    at constructClassInstance (react-dom.development.js:13522:1)
    at updateClassComponent (react-dom.development.js:20497:1)
    at beginWork (react-dom.development.js:22440:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)

Answer 1

it's due to versioning. I downgraded from 18 to 17 and it worked. Man sometimes open source code consumes your all day.

Answer 2

To resolve these issues, you have to remove *<React.StrictMode>* in the index.js file.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>);

To

     const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Answer 3

I Just removed the <React.StrictMode> in the index.js file and it worked for me.

Answer 4

I got this error too. I was using node v16 for another project, but once I installed/switched to v18 with nvm, this error went away.

nvm install 18
nvm use 18