TypeError: L.gridLayer.googleMutant is not a function

[varunbln]

Hi,

I'm using Next.js 14 and loading the Map in a client component like so:

<>
  <MapContainer
        key={mapType}
        center={location}
        zoom={zoom}
        className="rounded-l-2xl"
      >
        <ReactLeafletGoogleLayer
          apiKey={process.env.NEXT_PUBLIC_MAPS_API_KEY}
          type={mapType}
        />
  </MapContainer>
</>

This error: TypeError: L.gridLayer.googleMutant is not a function occurs around 20% of the time, more so on slower connections. You can test this in the chrome network tab by setting the throttle option to slow 4G or 3G. It looks like its a race condition, where the script tries to use L.gridLayer.googleMutant before its loaded.

Not sure if I'm missing anything, but I just added "react-leaflet-google-layer": "^2.2.0" to my package.json, along with "react-leaflet": "^4.2.1"

Unsure how to solve this and ensure that the googleMutant is added to gridLayer before the script runs, would appreciate any support!

[aviklai]

@varunbln Hi,

Can you please create a codesandbox with the issue?

[varunbln]

Unable to reliably reproduce in a codesandbox, but here's a recording:

https://github.com/user-attachments/assets/6bfb5ca4-f3d9-427e-a89a-3d546e4136a8

Source code: Page - https://github.com/solarpunkhq/solarpunk/blob/main/src/app/(user)/exp/page.tsx Wrapper Component for Map - https://github.com/solarpunkhq/solarpunk/blob/main/src/components/exp/MapWrapper.tsx Map Component - https://github.com/solarpunkhq/solarpunk/blob/main/src/components/exp/ExpMap.tsx

[aviklai]

@varunbln Hi, I am not familiar with next.js but maybe you can try to preload leaflet and googleMutant and see if that helps? And why isn't it reproduceable in a codesandbox?

[varunbln]

Sorry I didnt quite get you, what do you mean preload?

Not sure why I'm unable to reproduce in a sandbox, maybe some next.js project specific settings causing it

[aviklai]

Try to import them before the dynamic import: https://github.com/solarpunkhq/solarpunk/blob/main/src/components/exp/MapWrapper.tsx#L4

[varunbln]

That gives

ReferenceError: L is not defined

Call Stack
eval
node_modules/leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js (377:1)
eval
node_modules/leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js (769:2)

for:

import * as L from 'leaflet'
import 'leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant'

before the dynamic import

[varunbln]

ahh nvm, it was being unused, so it said not defined. I changed it to

import * as L from 'leaflet'
console.log(L)
import 'leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant'

and it works now, issue resolved.

Thank you so much!