[英]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:编辑:这是我的调用堆栈的样子:
Your GoogleMapReact
import is wrong.您的
GoogleMapReact
导入错误。 It should be:它应该是:
import GoogleMapReact from 'google-map-react';
https://github.com/google-map-react/google-map-react#getting-started https://github.com/google-map-react/google-map-react#getting-started
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.