Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren')

[SmartMan1226]

The default component throws the error before rendering when using it with Next.js.

Screenshots 🖥

Environment:

• OS: Linux
• Browser Chrome
• Version 100

[SmartMan1226]

Turned out, that this is a version compatibility issue with React@18.

[IMPWNG]

Got the same issue .. I thing we need to downgrade to React@17 ..

[Feridun12]

Please fix this issue I am a junior dev and don't have that many options when it comes to adding maps to the website😅. Did anyone manage to solve this issue yet? If so please get in contact with me please.

[CrissAlvarezH]

Try remove StrictMode. On next.config.js for Nextjs

const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

[Spencer-lolley]

Try remove StrictMode. On next.config.js for Nextjs

const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

still doesnt work

[siawfish]

Any fixes for this please?

[siawfish]

false

turning reactStrictMode: false fixed it for me. Thanks

[ASPeXP]

Thanks

Try remove StrictMode. On next.config.js for Nextjs

const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

Thanks, it's work., You saved my day.

[joaogarin]

I think the solution mentioned here is not really a great one long term, strictMode can find things that are incompatible with React 18 features in your application, turning it off could have unwanted side effects.

From https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

Suggested: We strongly suggest you enable Strict Mode in your Next.js application to better prepare your application for the future of React.

[skreutzberger]

Hi, disabling strict mode is not really developer friendly and may leave a Nexjs open to issues. Do you plan to upgrade the library to React 18 and if yes do you already have a potential ETA for it? Thank you 🙏

[antoniocosentino]

I saw that version 2.2.0 was just released (https://github.com/google-map-react/google-map-react/pull/1103) so I upgraded it in my project but I still get the same error. Anybody else experiencing the same issue even after upgrading?

So far I solved it by disabling reactStrictMode as it was suggested here, but I would like to re-enable it as soon as possible

[samfromaway]

I have the same issue Using: "google-map-react": "^2.2.0", "react": "^18.2.0", "next": "^12.2.0",

Error is: TypeError: Cannot read properties of undefined (reading 'getChildren')

If adding reactStrictMode: false it works but obviously this is not a long-term solution.

[LucidNinja]

Same issue. reactStrictMode is just a temporary workaround. Please resolve this.

[Hiti3]

same here... still nothing?

[WashingtonLuiz99]

same here... still nothing? help me

[financialvice]

pls fix this is so sad 😫

[Reyesnes]

Hello dears. Suddenly this problem started appearing for me. Every time I'm just writing the code, the terminal window (Output) opens and shows me this error:

2022-09-27 15:27:40 Cannot read properties of undefined (reading 'getChildren0')

Can you help me to solve this please! I am working with SQL language

[longlostnick]

I ended up just dumping this library. Turns out it wasn't hard at all just using @googlemaps/react-wrapper and @types/google.maps (for typescript). Just follow these two guides:

• https://developers.google.com/maps/documentation/javascript/react-map
• https://developers.google.com/maps/documentation/javascript/using-typescript

Your code will end up looking something like this:

import {Wrapper} from '@googlemaps/react-wrapper';

const App = () => {
  return (
    <Wrapper apiKey={API_KEY}>
      <Map latitude={0} longitude={0} />
    </Wrapper>
  );
};

const Map = ({latitude, longitude}: {latitude: number; longitude: number}) => {
  const ref = React.useRef(null);
  const [map, setMap] = React.useState<google.maps.Map | null>(null);

  React.useEffect(() => {
    if (ref.current && !map) {
      setMap(
        new google.maps.Map(ref.current, {
          zoomControl: true,
          mapTypeControl: false,
          streetViewControl: false,
          center: {
            lat: latitude ?? 0,
            lng: longitude ?? 0,
          },
          zoom: 11,
        })
      );
    }
  }, [ref, map, latitude, longitude]);

  return <div ref={ref} style={{height: '100%', width: '100%'}} />;
};

[ckt22]

I ended up just dumping this library. Turns out it wasn't hard at all just using @googlemaps/react-wrapper and @types/google.maps (for typescript). Just follow these two guides:

• https://developers.google.com/maps/documentation/javascript/react-map
• https://developers.google.com/maps/documentation/javascript/using-typescript

Your code will end up looking something like this:

import {Wrapper} from '@googlemaps/react-wrapper';

const App = () => {
  return (
    <Wrapper apiKey={API_KEY}>
      <Map latitude={0} longitude={0} />
    </Wrapper>
  );
};

const Map = ({latitude, longitude}: {latitude: number; longitude: number}) => {
  const ref = React.useRef(null);
  const [map, setMap] = React.useState<google.maps.Map | null>(null);

  React.useEffect(() => {
    if (ref.current && !map) {
      setMap(
        new google.maps.Map(ref.current, {
          zoomControl: true,
          mapTypeControl: false,
          streetViewControl: false,
          center: {
            lat: latitude ?? 0,
            lng: longitude ?? 0,
          },
          zoom: 11,
        })
      );
    }
  }, [ref, map, latitude, longitude]);

  return <div ref={ref} style={{height: '100%', width: '100%'}} />;
};

Works for me. Thank you very much!

[jerachil]

Finally works for me (Next 13.4.8) by simply adding "use client" the top of the file. Not a really optimal solution though as you have to feed a public google API Key to the client side.

[azarshab]

Try remove StrictMode. On next.config.js for Nextjs

const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

It worked for me. thank you

[volfcan]

doing strictmode to false is a terrible idea as it helps you to detect unsafe lifecycles, legacy API usage, and other issues. it's like quick workaround but you'll eventually turn it on in the future.

[antoniocosentino]

@volfcan this is not necessary anymore. If you upgrade the library to 2.2.1 everything should work correctly, even with reactStrictMode enabled (at least, that's the case in my projects)

[TsuriH]

@volfcan this is not necessary anymore. If you upgrade the library to 2.2.1 everything should work correctly, even with reactStrictMode enabled (at least, that's the case in my projects)

Upgrade what? Which library to upgrade, unfortunately I'm facing the same issue here

[antoniocosentino]

@TsuriH obviously talking about the google-map-react library, since we are in the issues section of that library