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

r2DoesInc · 2024-09-07T20:53:49Z

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

The text was updated successfully, but these errors were encountered:

usefulthink · 2024-09-07T21:47:27Z

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 · 2024-09-07T21:50:07Z

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 · 2024-09-07T23:00:26Z

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 · 2024-09-07T23:04:22Z

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

Im very confused.

r2DoesInc · 2024-09-07T23:06:58Z

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 · 2024-09-07T23:35:00Z

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 · 2024-09-08T08:29:55Z

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 · 2024-09-08T09:03:54Z

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 · 2024-09-08T09:10:07Z

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 · 2024-09-08T09:21:23Z

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?

Typescript versions prior to 5.5 automatically emitted triple-slash directives for types used in the exported definitions. This was changed in 5.5, which could lead to situations where the google.maps types aren't properly picked up in a project using this package. Adding a type-reference ourselves should help in those cases. See https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#simplified-reference-directive-declaration-emit fixes visgl#519

Typescript versions prior to 5.5 automatically emitted triple-slash directives for types used in the exported definitions. This was changed in 5.5, which could lead to situations where the google.maps types aren't properly picked up in a project using this package. Adding a type-reference ourselves should help in those cases. See https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#simplified-reference-directive-declaration-emit fixes #519

usefulthink · 2024-09-08T18:35:34Z

I published 1.1.3, can you test this in your old setup to see if it is now working correctly?

r2DoesInc · 2024-09-08T21:13:16Z

That did it!

I added my types array back to the tsconfig and omitted google.maps, bumped to v1.1.3. Everything seems to be working fine now.

Thanks for getting this resolved so quickly.

r2DoesInc added the bug Something isn't working label Sep 7, 2024

usefulthink mentioned this issue Sep 8, 2024

fix(types): add types-reference to google.maps #520

Merged

usefulthink closed this as completed in #520 Sep 8, 2024

github-actions bot mentioned this issue Sep 8, 2024

chore(main): release 1.1.3 #521

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

r2DoesInc commented Sep 7, 2024 •

edited

Loading

usefulthink commented Sep 7, 2024

usefulthink commented Sep 7, 2024 •

edited

Loading

r2DoesInc commented Sep 7, 2024

r2DoesInc commented Sep 7, 2024

r2DoesInc commented Sep 7, 2024 •

edited

Loading

r2DoesInc commented Sep 7, 2024 •

edited

Loading

usefulthink commented Sep 8, 2024 •

edited

Loading

r2DoesInc commented Sep 8, 2024

r2DoesInc commented Sep 8, 2024

usefulthink commented Sep 8, 2024 •

edited

Loading

usefulthink commented Sep 8, 2024

r2DoesInc commented Sep 8, 2024

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

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

Comments

r2DoesInc commented Sep 7, 2024 • edited Loading

Description

Steps to Reproduce

Environment

Logs

usefulthink commented Sep 7, 2024

usefulthink commented Sep 7, 2024 • edited Loading

r2DoesInc commented Sep 7, 2024

r2DoesInc commented Sep 7, 2024

r2DoesInc commented Sep 7, 2024 • edited Loading

r2DoesInc commented Sep 7, 2024 • edited Loading

usefulthink commented Sep 8, 2024 • edited Loading

r2DoesInc commented Sep 8, 2024

r2DoesInc commented Sep 8, 2024

usefulthink commented Sep 8, 2024 • edited Loading

usefulthink commented Sep 8, 2024

r2DoesInc commented Sep 8, 2024

r2DoesInc commented Sep 7, 2024 •

edited

Loading

usefulthink commented Sep 7, 2024 •

edited

Loading

r2DoesInc commented Sep 7, 2024 •

edited

Loading

r2DoesInc commented Sep 7, 2024 •

edited

Loading

usefulthink commented Sep 8, 2024 •

edited

Loading

usefulthink commented Sep 8, 2024 •

edited

Loading