aviklai / react-leaflet-google-layer

Google layer for React-Leaflet using leaflet.gridlayer.googlemutant, implemented with typescript
MIT License
49 stars 8 forks source link

Upgrade peer dependencies to support react-leaflet v4 #33

Open argarner opened 2 years ago

argarner commented 2 years ago

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 commented 2 years ago

@argarner Hi,

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

argarner commented 2 years ago

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 commented 2 years ago

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.

image
argarner commented 2 years ago

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

aviklai commented 2 years ago

@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.