[Bug] v1.7.0 breaks other library's type system

[xsjcTony]

Description

E.g. a widely used libeary @headlessui/react's type is broken after upgrading this lib to v1.7.0. As a form UI library, it could be used a lot with this lib.

v1.7.0 introduced a lot types into the React.JSX namespace, and it may conflict with others who's using it.

First, thanks for the library, and I'm not saying it's anyone's fault, just trying to figure out what's the conflicting part there and see whether there's a way to workaround. Ideally those libs thould be able to work together without any problem.

I also posted an issue in @headlessui/react's repository: tailwindlabs/headlessui#3816

Steps to Reproduce

Example of it's broken: https://stackblitz.com/edit/vitejs-vite-wsz68euq?file=src%2FApp.tsx

Example of it's NOT broken without importing this lib: https://stackblitz.com/edit/vitejs-vite-udhvbqcd?file=src%2FApp.tsx

Environment

• Library version: @vis.gl/react-google-maps@1.7.0
• Google maps version: weekly
• Browser and Version: Chrome 141.0
• OS: Windows 11

[usefulthink]

Can you please be a bit more specific what you mean by "broken"? Are there error-messages? Which ones? All I can see in your broken example is 'APIProvider' is declared but its value is never read., but that can't be what you mean?!

[xsjcTony]

Can you please be a bit more specific what you mean by "broken"? Are there error-messages? Which ones? All I can see in your broken example is 'APIProvider' is declared but its value is never read., but that can't be what you mean?!

Sorry for not being specific, please refer to the screenshot and comment in the code.
If you compare both examples, you can see once you imported this lib (it bahaves the same as import '@vis.gl/react-google-maps' to import types), the types from @headlessui/react are all gone.

To be honest, I don't see the changes here have anything wrong, as it's the way to extend React.JSX, but worried about it may conflict with even more UI libraries, since all UI libraries rely on React.JSX.IntrinsicElements a lot to build the type system.

You can comment or uncomment the importing of this lib (line 3) to see differences immediately.

[GMchris]

Can confirm this has caused a lot of issues in MUI and so we'll have to omit it from our dependabot update

[usefulthink]

That was an interesting debugging session... Here's the gemini summery:

To summarize:

• The Root Cause: The type definition file for @vis.gl/react-google-maps included a definition for the custom element
  gmp-place-contextual that referenced a type (google.maps.places.PlaceContextualElementOptions) which does not exist
  in the installed version of @types/google.maps.
• The Effect: This invalid type reference caused a cascading failure in TypeScript's type resolution process, which
  resulted in types from the @headlessui/react library being incorrectly resolved as any.
• The Solution: Commenting out or removing the invalid type definition for gmp-place-contextual from the RGM
  index.d.ts file resolves the issue.

Fix incoming...

[usefulthink]

Version 1.7.1 which didn't show those problems for me should be on npm in the next minutes..

Thanks for reporting!

[Alen-V]

@usefulthink even with version 1.7.1, I get a typescript error that google namespace doesn't exist :/
Cannot find namespace 'google' at every instance that it was referenced :(

[usefulthink]

That sounds like a different problem that might have something to do with your specific setup. The @types/google.maps package should have been installed as a dependency (verify with npm ls @types/google.maps), let me know if that ls comes up empty. If it is installed, that would mean that typescript for some reason doesn't read it. One common problem is misconfigured types and typeRoots settings in your tsconfig.json.

(For me, gemini-cli does a great job when it comes to spotting and explaining these kind of misconfigurations. Copilot etc might work equally well)

[Aravind6498]

Still facing the same isue in version 1.7.1, also npm ls @types/google.maps comes up empty in the same version.

[usefulthink]

With version 1.8.2 (current), the @types/google.maps package should actually be installed twice, and in v1.7.1 it should at least be listed as dependency of @vis.gl/react-google-maps:

I seriously don't understand how this would happen.

@Aravind6498 can you share the version of node and npm you're using (or if you're using an alternative package-manager, which one)?

Also have a look into your package-lock.json – It should list the @types/google.maps package as installed and in the dependencies of @vis.gl/react-google-maps.