visgl/react-map-gl

[Bug] Type error when using Mapref

matthiasfeist-foodfacts opened this issue · 5 comments

matthiasfeist-foodfacts commented

Description

I am using react-map-gl with MapLibre in a next.js project.
When trying to use MapRef as highlighted in this example: https://visgl.github.io/react-map-gl/docs/api-reference/map#methods I get a typeScript error when I pass the mapRef constant to the ref prop of the Map component.

Type 'MutableRefObject<MapRef | undefined>' is not assignable to type 'Ref<MapRef> | undefined'.
  Type 'MutableRefObject<MapRef | undefined>' is not assignable to type 'RefObject<MapRef>'.
    Types of property 'current' are incompatible.
      Type 'MapRef | undefined' is not assignable to type 'MapRef | null'.
        Type 'undefined' is not assignable to type 'MapRef | null'.ts(2322)

Expected Behavior

No response

Steps to Reproduce

  1. Copy the code from here https://visgl.github.io/react-map-gl/docs/api-reference/map#methods that demonstrates the use of MapRef into a fresh Next.JS project with TypeScript and try to build it.
  2. TypeScript strict mode needs to be on.

Environment

  • Framework version: react-map-gl@7.1.4
  • Map library: maplibre-gl@3.3.0
  • Browser: Chrome
  • OS: MacOS Ventura

Logs

No response

Pessimistress commented

I cannot reproduce this. Please create a CodeSandbox.

matthiasfeist commented

Absolutely, here you go: https://codesandbox.io/s/small-glitter-7ygh2q?file=/src/App.tsx
All I did was to copy the example from the docs into the cloudSandbox. As you can see, the editor highlights the problem with the ref.

Pessimistress commented

If your tsconfig strictly differentiates between undefined and null you can just initiate your ref with null.

const mapRef = useRef<MapRef>(null);

matthiasfeist-foodfacts commented

cool thanks. I might send a PR to update the docs accordingly :)