[Bug] Incorrect types causing build to fail while using Vite

[DennisMartinez]

Description

Hello! I'm experiencing an issue using react-map-gl with a Vite generated project. When I build my project, I'm presented with the following error:

node_modules/react-map-gl/dist/esm/components/use-map.d.ts:13:5 - error TS2411: Property 'current' of type 'MapRef | undefined' is not assignable to 'string' index type 'MapRef'.

13     current?: MapRef;

This doesn't seem to happen using CRA and I can remedy this by swapping skipLibCheck to false in the tsconfig, but that doesn't seem correct. I'm unsure if this is a TypeScript issue, Vite issue, or a bug related to this library.

I've created a test repo here: https://github.com/DennisMartinez/vite-react-map-gl-bug

Expected Behavior

To build without type errors.

Steps to Reproduce

Pull the test repo
Create a .env.local file and add your mapbox api token

VITE_APP_MAPBOX_TOKEN=

Install the dependencies with yarn install
Build the project with yarn build
Observe the error in the console

Environment

• Framework version: react@17.0.2, react-dom@17.0.2
• Map library: react-map-gl@7.0.9, mapbox-gl@2.7.0
• Browser: N/A
• OS: macOS Monterey 12.0.1 (21A559)

The app was generated using vite react-ts.

Logs

Terminal error while building

node_modules/react-map-gl/dist/esm/components/use-map.d.ts:13:5 - error TS2411: Property 'current' of type 'MapRef | undefined' is not assignable to 'string' index type 'MapRef'.

13     current?: MapRef;

[Pessimistress]

Seems that the string indexed fields must be more generic than the specific ones: https://www.typescriptlang.org/docs/handbook/interfaces.html#indexable-types

[Pessimistress]

Published 7.0.10

[DennisMartinez]

Thank you @Pessimistress!

[trumbitta]

Hi @Pessimistress 👋

I'm having the same issue in two places:

node_modules/react-map-gl/dist/esm/components/use-map.d.ts:17:5 - error TS2411: Property 'current' of type 'MapRef<MapT> \| undefined' is not assignable to 'string' index type 'MapRef<MapT>'.
--
  |  
  | 17     current?: MapRef<MapT>;
  | ~~~~~~~
  |  
  | node_modules/react-map-gl/dist/esm/exports-mapbox.d.ts:15:5 - error TS2411: Property 'current' of type 'MapRef<Map> \| undefined' is not assignable to 'string' index type 'MapRef<Map>'.
  |  
  | 15     current?: _MapRef<MapboxMap>;

I'm on version 7.1.3

[trumbitta]

@Pessimistress sorry to bother you with another mention: I also prepared a PR for this: #2250