react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard

[Bug] cannot find namespace 'google' on version 1.6.1

Open devdumpling opened this issue 2 months ago • 3 comments

Description

When updating from 1.5.5 to 1.6.1 I noticed my typecheck start failing anywhere I'm referencing google's namespace.

I see in the most recent version there was a change to tsLib, maybe related?

I also saw this old issue thread https://github.com/visgl/react-google-maps/issues/519


For reference in case it's helpful:

Here are my tsconfigs (I extend a base one in a monorepo)

// base.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "inlineSources": false,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules"]
}

// react-library.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Library",
  "extends": "./base.json",
  "compilerOptions": {
    "lib": ["ES2015", "DOM"],
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react-jsx",
    "noEmit": true,
    "types": [
      "node",
      "@testing-library/dom",
      "@testing-library/jest-dom",
      "@testing-library/user-event",
      "@testing-library/react",
      "vitest/globals"
    ]
  }
}
// ui package config

{
  "extends": "@company/config.typescript/react-library.json",
  "include": [
    ".",
    "../../analytics/src/providers/AnalyticsProvider/PageProvider"
  ],
  "compilerOptions": {
    "lib": ["dom", "dom.iterable"]
  },
  "exclude": ["dist", "build", "node_modules"]
}

Steps to Reproduce

Will get one up when I have a minute here

Environment

  • Library version: 1.6.1
  • Google maps version: weekly
  • Browser and Version: Chrome 141.0.7390.108 ARM
  • OS: Mac OS Sequoia 15.5

Logs


devdumpling avatar Oct 29 '25 17:10 devdumpling

A first idea what might be wrong: https://www.typescriptlang.org/tsconfig/#types – if you specify the types option, typescript wont automatically add types from @types/* to the global scope, so you need to add google.maps to that list (note: adding it to the ui-package config will overwrite the entire list, you'd need to copy all of the entries from react-library.json as well.

Or you can try getting rid of it, which should usually work as well.

LMK if that helps! (sidenote: chatgpt, gemini etc are surprisingly good at understanding and managing tsconfig files)

usefulthink avatar Oct 29 '25 19:10 usefulthink

That doesn't quite explain why it worked earlier, but it could be something related to this: https://github.com/googlemaps/js-api-loader/issues/1002

usefulthink avatar Oct 29 '25 19:10 usefulthink

I think I figured it out:

  • Version 1.5.5** of @vis.gl/react-google-maps had /// <reference types="google.maps" /> which auto-included Google Maps types
  • Version 1.6.1 removed this directive and expects google.maps types to be globally available

As you pointed out, dropping my types options works here (as well as installing the @types/google.maps devdep for us.

Feel free to close this or keep it open if you think it'll be useful to others for a min.

devdumpling avatar Oct 30 '25 13:10 devdumpling