AngularFire is not compatible with Firebase JS SDK v8

Version info

Angular: v10.2.0

Firebase: v8.0.0

AngularFire: v6.0.3

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Debug output

ERROR in node_modules/@angular/fire/auth/auth.d.ts:4:10 - error TS2614: Module '"../../../firebase"' has no exported member 'User'. Did you mean to use 'import User from "../../../firebase"' instead?
4 import { User, auth } from 'firebase/app';
           ~~~~
node_modules/@angular/fire/auth/auth.d.ts:4:16 - error TS2614: Module '"../../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../../firebase"' instead?
4 import { User, auth } from 'firebase/app';

Expected behavior

There should be no errors.

[Reprevise]

I still can’t get auth and User by importing firebase/app. It just says it doesn’t have an exported member User and auth.

firebase version: 8.2.0 AngularFire version: 6.1.4 Angular version: 11.0.5

[sarunint]

@jamesdaniels Sorry for the absence. I tested 6.0.4 with firebase@7 and it does not work. In firebase@8 it does work though.

Here’s my analysis.

In firebase@7, the firebase is export as such:

export = firebase;

So, to be able to use import firebase from 'firebase'; in AngularFire’s codebase, the user needs to have allowSyntheticDefaultImports set as true in their tsconfig.json.

But in 6.0.4 type definition, there is one line that is problematic. Here:

https://unpkg.com/browse/@angular/fire@6.0.4/storage/observable/fromTask.d.ts

The import("firebase").default.storage.UploadTaskSnapshot does not play very well with "allowSyntheticDefaultImports": true. Hence, there is this error while building a project with 6.0.4 and firebase@7:

ERROR in node_modules/@angular/fire/storage/observable/fromTask.d.ts:3:83 - error TS2694: Namespace 'firebase' has no exported member 'default'.
3 export declare function fromTask(task: UploadTask): Observable<import("firebase").default.storage.UploadTaskSnapshot>;

Please take a look. I’m not sure why the generated .d.ts is using the import() type syntax, though.