Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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:

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda