[Bug] "Cannot find namespace google" on version => 1.1.1

[r2DoesInc]

Description

Since updating to version 1.1.1 and 1.1.2 from 1.1.0, I am no longer able to build my project as the google namespace is not available.

Hard coding 1.1.0 and reinstalling works perfectly.

Including @types/google.maps with the updated library version also did not seem to work.

Steps to Reproduce

Set your dependency version to "@vis.gl/react-google-maps": "^1.1.1" or "@vis.gl/react-google-maps": "^1.1.2",

Define a polygon object - or anything else from google.maps
let polygon: google.maps.Polygon

Environment

• Library version: => 1.1.1
• Google maps version: weekly
• Browser and Version: n/a
• OS: n/a

Logs

No response

[usefulthink]

Hmm, there's gotta be more to this. Just created a fresh project to check, installed @vis.gl/react-google-maps@1.1.2 and it worked as expected.

Can you check that node_modules/@types/google.maps exists in your project when the error occurs?

Also, when is the error happening? There's something about npm run build, and I assume it's a next.js app. Could it be that you're tyring to use the google.maps namespace during prerendering and before the maps-api is actually loeded?

[usefulthink]

for reference, when I try to do this:

export default function Home() {
  const foo = new google.maps.Polygon();

  return (
    // ...
  );
}

I get an error message like this:

$ npm run build

> build
> next build

  ▲ Next.js 14.2.8

 ✓ Linting and checking validity of types
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data
   Generating static pages (0/3)  [    ]ReferenceError: google is not defined
    at g (/path/to/rgm-next-test/.next/server/pages/index.js:1:1038)
    at Wc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Xc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: google is not defined
    at g (/path/to/rgm-next-test/.next/server/pages/index.js:1:1038)
    at Wc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Xc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/path/to/rgm-next-test/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
 ✓ Generating static pages (3/3)

> Export encountered errors on following paths:
	/

[r2DoesInc]

The error isnt during build time, Ive had those before and found the solution - waiting for the google maps to actually load in the window.

All i did here was change 1.1.0 to 1.1.1 and run npm install, and I get this error.

You can see types/google.maps is available

[r2DoesInc]

I have just tried one of the examples provided using 1.1.1 and i am not seeing an issue.

Im very confused.

[r2DoesInc]

I see in the example project using 1.1.1, google maps type is

    "name": "@types/google.maps",
    "version": "3.58.0",

vs

    "version": "3.55.12",
    "description": "TypeScript definitions for google.maps",

manually installing that version of the types didnt resolve it either

[r2DoesInc]

Further debugging shows its an issue with my tsconfig.json, but only with the library version =>1.1.1

Further, further debugging shows its an issue with the types array in my tsconfig.json

I dont know why this would have only come about in the latest versions, but it seems that you need to add google.maps to the types array.

      "types": ["vitest/globals", "google.maps"],

vs

[usefulthink]

Now here is something interesting: I had a look at a full diff of the package contents and noticed that for some reason the 1.1.0 version had a triple-slash directive referencing google.maps in every one of the .d.ts files, and they are no longer there in the 1.1.2 version.

Those aren’t in the source files, so they must have previously been added by the typescript compiler or microbundle/rollup.

This is also why adding it to the types in your tsconfig.json solves it for you. What it doesn't explain, though, is why this error doesn't happen with a fresh installation. Could it be that you have typeRoots specified in your tsconfig and that doesn't include the node_modules/@types directory?

[r2DoesInc]

This is my current tsconfig.

Ive also just noticed that simply removing the types array altogether also allows everything to work just fine.

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "strict": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,  
    "noUncheckedIndexedAccess": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "exactOptionalPropertyTypes": true,  
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowUnreachableCode": false,
    "noFallthroughCasesInSwitch": true,
    "target": "es2020", 
    "useDefineForClassFields": true,  
    "outDir": "out",
    "sourceMap": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "noEmit": true,
    "isolatedModules": true,
    "incremental": true,
    "types": ["vitest/globals", "google.maps"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/public/*": ["./public/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "exclude": ["./out/**/*", "./node_modules/**/*", ".storybook/*.ts"], 
  "include": [
    "git.properties",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "types.d.ts",
    ".next/types/**/*.ts",
    "**/*.mts"
  ]
}

[r2DoesInc]

It seems that this is more of a project configuration issue on my end, but whatever was generating that reference in the 1.1.0 version seems to make the library more robust. I think if possible, it would be good to bring that change to the later versions as well.

[usefulthink]

Seems to be one of the changes of typescript 5.5: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#simplified-reference-directive-declaration-emit

Edit: having read that, it seems the default assumption is that the google.maps types, if needed, will already be in your project's configuration, and we have them in our dependencies to make sure they’re at least installed.

As we directly use them (as part of our PropTypes for example), it would make sense to maintain such a reference in our types. That should probably just be once in the src/index.ts, like /// <reference types="google.maps" preserve="true" />. Maybe you want to create a pull-request to do that?