How to use google-map-react with Next.js?

Question

I'm not sure what I'm doing wrong. I'm trying to use google-map-react in my Next.js application. I copied the example on their npm page almost verbatim. Here's the code:

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

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

export default function SimpleMap() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };
  
  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "MY API KEY IS HERE" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <MapMarker text="My Marker" />
      </GoogleMapReact>
    </div>
  );
}

I keep getting this error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
    at o._getState (index.modern.js?922b:1:2062)
    at new o (index.modern.js?922b:1:3935)
    at constructClassInstance (react-dom.development.js?ac89:13492:1)
    at updateClassComponent (react-dom.development.js?ac89:20423:1)
    at beginWork (react-dom.development.js?ac89:22366:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
    at beginWork$1 (react-dom.development.js?ac89:27243:1)
    at performUnitOfWork (react-dom.development.js?ac89:26392:1)
    at workLoopSync (react-dom.development.js?ac89:26303:1)
    at renderRootSync (react-dom.development.js?ac89:26271:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25577:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

Any idea what's going on?

Thank you in advance.

Answer 1

Use - import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; Instead. Also when returning jsx elements use parens

Answer 2

Turn off strict mode. Probably in next.config.js as reactStrictMode.