Typescript 5.4.5 tsc failing against firebase 10.11.1

[wegry]

Operating System

macOS 14.4.1

Browser Version

N/A

Firebase SDK Version

10.11.1

Firebase SDK Product:

Auth, Database

Describe your project's tooling

typescript@5.4.5 and yarn@4.2.1 (both with PnP and node-modules as linkers). We use firebase within a Chrome extension we ship.

Describe the problem

After upgrading to Firebase 10.11.1, and adding an import to the new firebase/auth/web-extension, we're seeing TypeScript's tsc failing.

$ yarn tsc
.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/2/.yarn/berry/cache/@firebase-auth-npm-1.7.2-ae578599ac-10c0.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:17:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseService'.

17 import { _FirebaseService, FirebaseApp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/2/.yarn/berry/cache/@firebase-auth-npm-1.7.2-ae578599ac-10c0.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:19:47 - error TS2307: Cannot find module '@firebase/app-check-interop-types' or its corresponding type declarations.

19 import { AppCheckInternalComponentName } from '@firebase/app-check-interop-types';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/2/.yarn/berry/cache/@firebase-auth-npm-1.7.2-ae578599ac-10c0.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:65:70 - error TS2344: Type '"heartbeat"' does not satisfy the constraint '"auth"'.

65     constructor(app: FirebaseApp, heartbeatServiceProvider: Provider<'heartbeat'>, appCheckServiceProvider: Provider<AppCheckInternalComponentName>, config: ConfigInternal);
                                                                        ~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/2/.yarn/berry/cache/@firebase-auth-npm-1.7.2-ae578599ac-10c0.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/model/popup_redirect.d.ts:30:40 - error TS2503: Cannot find namespace 'gapi'.

30 export interface GapiAuthEvent extends gapi.iframes.Message {

Steps and code to reproduce issue

1. Clone https://github.com/wegry/broken-firebase-web-extension-types
2. yarn
3. yarn tsc

More context

Locally, we can sort of hedge around this with some module augmentations, but it'd be nice to not have to do this.

// shimFirebaseTypes.ts
/** @deprecated don't use this. It's to fix broken {@firebase/auth} types. */
declare module '@firebase/auth/dist/web-extension-esm2017/src/model/popup_redirect.d.ts' {
  // eslint-disable-next-line @typescript-eslint/no-namespace -- we're overriding a broken module type here.
  namespace gapi {
    // eslint-disable-next-line @typescript-eslint/no-namespace -- we're overriding a broken module type here.
    namespace iframes {
      export class Message {}
    }
  }
}

declare module '@firebase/app' {
  export class _FirebaseService {}
}

declare module '@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts' {}

declare module '@firebase/component' {
  export type Provider = any;
  export interface NameServiceMapping {
    ['app-check-internal']: any;
    heartbeat: any;
  }
}

[dlarocque]

Thank you so much for the great minimal reproduction project with steps!

I was able to successfully reproduce the issue, and we are looking into it.

[hsubox76]

Made some progress, a couple of things to note:

• This project is using Yarn 4 which uses pnp by default. In order to test local fixes the easiest way is to force node_modules installation by running yarn config set nodeLinker node-modules in the project.
• This also breaks in the same way for firebase/auth/cordova.
• I was able to "fix" the problem by changing the typings field in @firebase/auth/dist/web-extension/package.json to point to ./dist/auth-public.d.ts instead of the special webchannel typings entry point which is not what we want to do as a fix, but indicates the problem.

So I think the problem is that the typings for webchannel and cordova aren't run through the dts rollup the way that auth-public.d.ts is (using api-extractor), which rolls up all the scattered d.ts files into one. Instead it points to an entry point d.ts which points to a cascade of other files. Seems that yarn4 (or TS 5, or some combination) isn't able to navigate all those files the way we expect.

The correct solution is probably to run dts rollup steps, probably using api-extractor, or maybe rollup can do it, on the webchananel and cordova typings files to bundle them into one. We should NOT reuse auth-public.d.ts for those entry points since they're both missing some symbols or have some extra ones compared to the regular auth entry point.