No Context Provided: useLeafletContext() can only be used in a descendant of MapContainer

[amaster507]

Using react-leaflet@^3.2.2

I do have the code as a descendant of the MapContainer correctly, here is a minimal example of my setup:

import React from 'react'
import L from 'leaflet'
import { MapContainer, LayersControl } from 'react-leaflet'
import { GoogleLayer } from 'react-leaflet-google-v2'

const center = [35, -.94]
const zoom = 5
const key = "..."

const Map = () => {
  return (
    <MapContainer
      center={center}
      zoom={zoom}
    >
      <LayersControl position='bottomleft' autoZIndex>
        <LayersControl.BaseLayer checked={true} name='Google Maps Roads'>
          <GoogleLayer googlekey={key} maptype='ROADMAP' />
        </LayersControl.BaseLayer>
      </LayersControl>
    </MapContainer>
  )
}

export default Map

[FredChauviere]

If you're still working with react-leaflet V2, the last version of react-leaflet-google-v2 seems to be incompatible with react-leaflet v2.
You have to force 5.1.3 version of react-leaflet-google-v2 (last know compatible version) in your package.json.

[amaster507]

@FredChauviere As per my OP I am using 3.2.2.

[FredChauviere]

Oh sorry, I missed that information: I got the exact same error message with react-leaflet@2.8.0, I had to revert to react-leaflet-google-v2@5.1.3

[amaster507]

I think I boiled it down. There is a compile error with react-leaflet and there is an aternative package as a work around until the PR gets merged. Well, implementing that work around caused there to then be two different packages of the core. Even though they are both the same package but one is aliased to work around other issues. So by using the MapContainer from the aliased alternative package that includes the context from the non-aliased *core package. Then with this package and other packages that try to use the context of the aliased *core package the context is then null because it is not the same exact context file. I don't see a workaround this without creating another forked package that I or someone publishes to npm that basically fixes the problem and is setup to work as an aliased package. Talk about dependency nightmare!

References:
PaulLeCam/react-leaflet#885 (comment)
PaulLeCam/react-leaflet#883
aviklai/react-leaflet-google-layer#22

[Mylothros-Charalampos]

hello @amaster507, sorry for the late reply, we were investigating the error you mentioned and we published a new version can you try the version 5.2.0, use react leaflet 3.2.2 and tell us if everything is okay now?

[drheinheimer]

Basically, v5.1.4 should have been v6 due to bump from react-leaflet v2 to v3 and associated breaking changes.