React Google Maps Api :Cannot read properties of undefined reading 'emit'

user_10191553 0
Viewed 992

I want to Include a map with the google-map-react api, but I always get the following error:

google_map.js:428 Uncaught TypeError: Cannot read properties of undefined (reading 'emit') at o.r.componentDidUpdate (google_map.js:428:1) at commitLayoutEffectOnFiber (react-dom.development.js:23232:1) at commitLayoutMountEffects_complete (react-dom.development.js:24578:1) at commitLayoutEffects_begin (react-dom.development.js:24564:1) at commitLayoutEffects (react-dom.development.js:24502:1) at commitRootImpl (react-dom.development.js:26779:1) at commitRoot (react-dom.development.js:26638:1) at finishConcurrentRender (react-dom.development.js:25937:1) at performConcurrentWorkOnRoot (react-dom.development.js:25765:1) at workLoop (scheduler.development.js:266:1)

    import React from 'react'
    import GoogleMapReact from 'google-map-react'
    import {Paper, Typography, useMediaQuery} from '@material-ui/core'
    import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
    import Rating from "@material-ui/lab"
    import useStyles from './styles'

    
    const Map = () =>{
        const classes = useStyles();
        const isMobile= useMediaQuery("(min-width:600px)");
        const coords = {lat:0, lng:0}
        const API_KEY = "############"
        return(
            <div className={classes.mapContainer}>
               <GoogleMapReact
                    bootstrapURLKeys={{ key: API_KEY }}
                    defaultCenter={coords}
                    center={coords}
                    defaultZoom={14}
                    margin={[50, 50, 50, 50]}>
               </GoogleMapReact>
    
            </div>
        )
    }
    
    export default Map;
material-ui reactjs google-maps api javascript
2 Answers
user_193620220

I fixed this issue by changing my index.js to the code below without removing the . I am also using react-redux so if you are not using Redux you can remove the provider tag.

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import './index.css';



 ReactDOM.render(
    <React.StrictMode>
     <Provider store={store}>
      <App />
     </Provider>
    </React.StrictMode>,
    document.getElementById('root')
   );
 reportWebVitals();
user_153659310
Related