Search code examples
reactjsnext.jsreact-map-gl

useMap() always says { current: undefined }

I am using react-map-gl for a project. The map itself renders but i can't use useMap(). It always logs { current: undefined }. Has anyone a solution?

My layout.tsx contains:

import { MapProvider } from "react-map-gl";
....
<div className="flex h-screen">
  <MapProvider>
    <div>
      {children}
    </div>

    <InternalMap />
  </MapProvider>
</div>

);

InternalMap.tsx looks like:

  import MapGL, { ScaleControl } from "react-map-gl";

  <MapGL
      ....
   >
    ....some more stuff

The children page looks like:

import { useMap } from "react-map-gl";

const { default: map } = useMap();
console.log(map, useMap())
Solution

  • I messed up some imports in my monorepo and tried to imported react-map-gl from a wrong place with a version missmatch