React-google-maps: Cannot find namespace 'google', 'Calculator', 'ClusterIconStyle' and 'Cluster' even with corresponding types installed

[rdbll]

Hi, I get compilation errors about missing type namespaces in the react-google-maps/types/index.d.ts file, but the corresponding types are correctly installed. If I manually add theses lines at the top of the index.d.ts file

/// <reference types="google-maps" />
/// <reference types="markerclustererplus" />

everything works fine and I can actually see and use the map component provided as an example in the documention.

Unfortunately this is not really a solution. Does anyone have an idea on how this could happen?

I looked at these issues #363, #414 where some comments were related to this issue, but none of the suggested fixes worked.

Here are some details if it can help troubleshooting:

Compilations errors:

[...]/node_modules/react-google-maps/types/index.d.ts(51,27): error TS2503: Cannot find namespace 'google'
[...]/node_modules/react-google-maps/types/index.d.ts(77,29): error TS2304: Cannot find name 'Calculator'
[...]/node_modules/react-google-maps/types/index.d.ts(87,25): error TS2304: Cannot find name 'ClusterIconStyle'
[...]/node_modules/react-google-maps/types/index.d.ts(107,27): error TS2304: Cannot find name 'Cluster'

There are much more than that but theses are the error types that I get.


My tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "noEmitOnError": true,
    "lib": [ "es6", "dom" ],
    "module": "commonjs",
    "diagnostics": true,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "removeComments": true,
    "types": [
      "prop-types", "jest"
    ],
  },
  "exclude": [
    "node_modules",
    "__tests__"
  ]
}

Adding "googlemaps", "markerclustererplus" in types did not change anything.


My map component
This is just for reference, this is just a copy-paste of the example from the documentation.

import React from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}
  </GoogleMap>
))

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 3000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
      />
    )
  }
}

[rdbll]

My bad for some reason there were two tsconfig.js files in my project and I was modifying the wrong one. Adding "googlemaps", "markerclustererplus" to the types in the right tsconfig.js file fixed the issue.

[kachkaev]

yarn add -D @types/googlemaps @types/markerclustererplus solved this issue for me