Using react-leaflet-google-layer in react application we have some error how to solve ??

[Amarnathbn]

Cannot read properties of null (reading '_controlCorners') TypeError: Cannot read properties of null (reading '_controlCorners') at NewClass._setupAttribution (http://localhost:3000/static/js/bundle.js:165727:17) at NewClass.fire (http://localhost:3000/static/js/bundle.js:168931:16) at http://localhost:3000/static/js/bundle.js:165715:16

react 18.2.0
react-leaflet 4.2.1
react-leaflet-google-layer": "^2.2.0",


react code :


import { useState } from "react";

import { LayersControl, MapContainer, Marker, Polyline, useMap, } from "react-leaflet"; import "./leaflet.css"; import "leaflet/dist/leaflet.css"; import LeafLetIcon from "./Constants"; import ReactLeafletGoogleLayer from "react-leaflet-google-layer";

export const LeafLet = ({ pathData }) => { const firstPosition = pathData?.[0];

const lastPosition = pathData?.slice(-1)[0];

const middlePosition = pathData?.[(pathData?.length / 2) | 0];

const tripdata = pathData?.map((o) => Object.keys(o).map((k) => o[k])); const polylinedata = tripdata?.map((point) => point.slice(0, 2));

const ResizeMap = () => { const map = useMap(); map._onResize(); return null; }; const polylineColor = { color: "rgb(26 131 175 / 80%)", fillOpacity: 0.01, weight: 4, };

return ( <> <MapContainer center={{ lat: middlePosition?.latitude, lng: middlePosition?.longitude, }} zoom={10} zoomControl={false} scrollWheelZoom={false} > <ResizeMap />

    <ReactLeafletGoogleLayer
      apiKey={process.env.REACT_APP_APIKEY}
      type={"roadmap"}
    />
    <Marker
      position={{
        lat: firstPosition?.latitude,
        lng: firstPosition?.longitude,
      }}
      icon={LeafLetIcon}
    ></Marker>
    <Polyline pathOptions={polylineColor} positions={polylinedata} />
    <Marker
      position={{
        lat: lastPosition?.latitude,
        lng: lastPosition?.longitude,
      }}
      icon={LeafLetIcon}
    ></Marker>
  </MapContainer>
</>

); };

[aviklai]

@Amarnathbn Hi,

Can you please create a codesandbox with the error?

[JosehGaks]

Using nextjs 13 I am getting this error :

Module not found: ESM packages (@react-leaflet/core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

[aviklai]

@JosehGaks Hi,

Can you please add a codesandbox with the error?

[uSources]

Seems Leaflet.GridLayer.GoogleMutant dependency error, u can upgrade the dependecy to 0.14.0 and shoud be fixed https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/-/merge_requests/73

[JosehGaks]

@aviklai

I used Mapbox Vector tile instead. <VectorTileLayer attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>' styleUrl="mapbox://styles/mapbox/outdoors-v12" accessToken={process.env.NEXT_PUBLIC__MAP_BOX_ACCESS_TOKEN} />

[lewisd1996]

Also getting this error, any way we can fix this?