Upgrade peer dependencies to support react-leaflet v4

[argarner]

Including react-leaflet v4's dependencies of react v18 & leaflet v1.8

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: tco-ui@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR!   peer react@">=16.8.0" from react-leaflet-google-layer@2.0.5
npm ERR!   node_modules/react-leaflet-google-layer
npm ERR!     react-leaflet-google-layer@"2.0.5" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from react-leaflet@3.2.5
npm ERR! node_modules/react-leaflet
npm ERR!   react-leaflet@"^3.2.5" from the root project
npm ERR!   peer react-leaflet@"^3.0.0" from react-leaflet-google-layer@2.0.5
npm ERR!   node_modules/react-leaflet-google-layer
npm ERR!     react-leaflet-google-layer@"2.0.5" from the root project

force upgrade results in multiple typescript errors

TS2322: Type '{ apiKey: string; type: string; styles: ({ featureType: string; stylers: { saturation: number; }[]; } | { featureType: string; elementType: string; stylers: { visibility: string; }[]; })[]; }' is not assignable to type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.
  Property 'type' does not exist on type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.
    39 |           <ReactLeafletGoogleLayer
    40 |             apiKey={GOOGLE_MAP_API_KEY}
  > 41 |             type="roadmap"
       |             ^^^^
    42 |             styles={[
    43 |               {
    44 |                 featureType: 'all',

If you're aware of any workaround in the meantime, please advise. Thanks!

[aviklai]

@argarner Hi,

I upgraded the peer dependencies and released a new version - 2.0.6. Can you please check it out?

[argarner]

Thanks for the quick response @aviklai! Unfortunately, I'm still seeing the typescript conflicts with the ReactLeafletGoogleLayer component.

Type '{ apiKey: string; type: string; styles: ({ featureType: string; stylers: { saturation: number; }[]; } | { featureType: string; elementType: string; stylers: { visibility: string; }[]; })[]; }' is not assignable to type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.
  Property 'type' does not exist on type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.ts(2322)

On deeper inspection, we were previously on "react-leaflet-google-layer": "^2.0.4", so it looks like this change in import back in Feb may have made the googlemutant types inaccessible to consumers (used to resolve interface gridLayer.GoogleMutantOptions, but is now showing as any)?

I don't know enough about typescript type/library packaging to know why. Maybe:

1. Outdated dependencies? Latest are npm i @types/leaflet@1.7.10 @googlemaps/js-api-loader@1.14.3

2. Deprecated devDependency? @types/googlemaps was deprecated last year, and is now @types/google.maps.

3. Due to the change in import back in Feb, is there another way to force the bundling of @types/leaflet.gridlayer.googlemutant types for upstream consumers?

4. Is it possible the issue stems from the leaflet.gridlayer.googlemutant pkg and it needing an update due to the release of leaflet 1.8?

5. Otherwise, many of the devDependency types are outdated (.e.g "@types/react": "^16.8.7"), but I can't see how they would be the cause...

[argarner]

If I silence the typescript error with // @ts-expect-error our app appears to render fine, but bouncing around different map views in our storybook indicates there is a new issue with GoogleMutant and it's leaflet@1.8.0 compatibility, that we have not seen previously.

[argarner]

FYI I've just raised a new issue on the googlemutant add-on, related to leaflet 1.8.0 compatibility.

[aviklai]

@argarner Hi,

Regarding the typescript issue, are you importing the library the following way? import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';

And can you please create a codesansbox that reproduces your typescript issue? Because I am not able to reproduce it.