AngularFire is not compatible with Firebase JS SDK v8

[sarunint]

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.

[jamesdaniels]

Give 6.0.4-canary.9a26fbe a spin, I'll be releasing 6.0.4 final shortly.

[jamesdaniels]

Releasing 6.0.4 with support for v8 later today.

[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.

[dusanradojcic00]

I am still having the same problem. Angular version 11.0.2 and AngularFire version 6.1.1

[jamesdaniels]

I am still having the same problem. Angular version 11.0.2 and AngularFire version 6.1.1

Drop angularfire2, that's no longer maintained and looks like it's wrapping an old version of @angular/fire

[dusanradojcic00]

Yeah. It works now, thanks!

[wizjamin]

@dusanradojcic00 how'd you get it working??. I'm using angularfire v6.1.2 and i'm still getting those errors

[dusanradojcic00]

@wizjamin remove angularfire2, that's what worked for me. Check all dependencies and imports inside NgModule.

[Ivnosing]

@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.

Fixed in 6.1.4 by #2703.