alpha: Cannot find namespace 'gapi'.

[peterpeterparker]

[REQUIRED] Describe your environment

• Firebase SDK version: "firebase": "^0.900.11"

[REQUIRED] Describe the problem

This will probably difficult to debug, as I tried to migrate our app to alpha and, did not faced the issue in a sample app. Anyway, once I migrated auth, storage, firestore and firestore lite I faced the following error when I ran my app for the first time:

[ ERROR ] TypeScript: ./node_modules/@firebase/auth/dist/esm5/src/model/popup_redirect.d.ts:32:40
Cannot find namespace 'gapi'.
L31: /** @internal */
L32: export interface GapiAuthEvent extends gapi.iframes.Message {
L33: authEvent: AuthEvent;

[37:10.4] build failed, watching for changes... in 11.72 s

Steps to reproduce:

git  clone https://github.com/deckgo/deckdeckgo/ -b firebase_alpha
cd deckdeckgo/studio
npm ci
npm run start

Relevant Code:

Signin component:

https://github.com/deckgo/deckdeckgo/blob/bd41dd2b192ff366ccb660532a988f73b0169b6c/studio/src/app/components/core/app-signin/app-signin.tsx#L3

Firebase init:

https://github.com/deckgo/deckdeckgo/blob/firebase_alpha/studio/src/app/utils/editor/firestore.utils.ts

Auth state change:

https://github.com/deckgo/deckdeckgo/blob/firebase_alpha/studio/src/app/services/auth/auth.service.ts

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[sam-gc]

Hi @peterpeterparker, out of curiosity are you using Webpack or Rollup to build this?

[peterpeterparker]

@samhorlbeck indeed. it's a Stencil app, it uses Rollup under the hood.

[Feiyang1]

We shouldn't expose our internal typings, especially the global ones (e.g. gapi). #4398 will fix it.

Is it possible to ask stencil to ignore typescript errors? it is a purely typings issue, so you app should build fine.
Otherwise, can you change the tsconfig to:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h",
    "resolveJsonModule": true
  },
  "include": ["src", "node_modules/@firebase/auth/dist/esm5/src/platform_browser/iframe/gapi.iframes.d.ts"]
}

This config works for me.

[peterpeterparker]

Nice 👍

I will most probably wait on #4398 to try alpha further as it will need changes in my code and, the goal being to test the new Firebase API. Therefore no need of workaround meanwhile but, yes I would be able to tweak the tsconfig as you displayed

Thx!