Currently, I am working on a basic nextjs application using the google-map-react component and nextjs. However, I keep encountering an error whenever I try to utilize the component.
The error message reads as follows: "TypeError: can't access property "getChildren", n.props.dispatcher is undefined"
I'm unsure about what steps to take next as it appears to be related to the version of reactapp that I am currently using.
import React from 'react';
import GoogleMapReact from 'google-map-react';
export default function Map({ coords }: { coords: { lat: number; lng: number } }) {
return (
<>
<div className='w-full h-4/5'>
<GoogleMapReact
bootstrapURLkeys={{ key: process.env.REACT_APP_GOOGLE_MAPS_API_KEY }}
defaultCenter={coords}
center={coords}
defaultZoom={14}
margin={[50, 50, 50, 50]}
>
</GoogleMapReact>
</div>
<div>
dede
</div>
</>
)
}
PACKAGE.JSON
{
"name": "travelcompagnon",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"@react-google-maps/api": "^2.10.2",
"@types/node": "17.0.31",
"@types/react": "18.0.9",
"@types/react-dom": "18.0.3",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"dotenv": "^16.0.0",
"eslint": "8.15.0",
"eslint-config-next": "12.1.6",
"google-map-react": "^2.1.10",
"postcss-import": "^14.1.0",
"tailwindcss": "^3.0.24",
"typescript": "4.6.4"
}
}