Getting React Runtime error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Question

This is what my code looks like:

import { React, useState, useEffect } from 'react';
import { GoogleMapReact } from 'google-map-react';
import styles from './Location.module.scss';
import pinstyles from './TheMap.module.scss';
import { useIntl } from 'react-intl';

/* This file has the actual with the coordinates passed to it */
const TheMap = (props) => {
  // for holding the API key and language
  const bootstrapURLKeys = {
    //should this be french?
    key: process.env.NEXT_PUBLIC_API_KEY,
    language: 'en',
  };

  //const [test, setTest] = useState(false);

  //   const marker = new google.maps.Marker({
  //     position: props.center,
  //     map,
  //   });

  // To do with the language of the map
  const { formatMessage: f } = useIntl();

  return (
    <div className={styles.main}>
      <div className={styles.heading}> {f({ id: 'location' })} </div>
      <div className={styles.mapContainer}>
        {/* TODO: The defaultZoom should be working but it isn't, not 
        a big deal but fix when there's time (it'll look better) */}
        <GoogleMapReact
          bootstrapURLKeys={bootstrapURLKeys}
          defaultZoom={props.zoom}
          center={props.center}
          yesIWantToUseGoogleMapApiInternals
          options={{ fullscreenControl: false }}
        >
          <Marker lat={props.lat} lng={props.lng} />
        </GoogleMapReact>
      </div>
      {/* Adding the address to the bottom of the map */}
      {props.location[1].address}
      {props.location[1].postalCode}
    </div>
  );
};

const Marker = (props) => {
  return (
    <>
      <div className={pinstyles.pin}></div>
      <div className={pinstyles.pulse}></div>
    </>
  );
};

export default TheMap;

And this is the full error:

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I would like to know how to get rid of this error.

EDIT: Here is what my call stack looks like:

Answer 1

Your GoogleMapReact import is wrong. It should be:

import GoogleMapReact from 'google-map-react';

https://github.com/google-map-react/google-map-react#getting-started