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/[email protected]/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/[email protected]/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.

[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

[eduardovpessoa]

@Reprevise same here! =(

[shadowboxingskills]

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

same issue. auth has apparently been removed

[Villanuevand]

@Reprevise @eduardovpessoa @shadowboxingskills

You need to know now from version 8 you can import just the services you use:

// This import loads the firebase namespace along with all its type information.
import firebase from 'firebase/app';

// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';

You can read more about here

[jamesdaniels]

You have to use the full form firebase.auth.User in v8, can't shorthand it as auth.User

[QuentinFarizon]

I have :

import firebase from 'firebase/app';
import 'firebase/auth'

I can use firebase.User but not firebase.auth.User ...

[jamesdaniels]

Ah yeah, they just changed the API in v8 firebase.User is the same thing auth.User used to be.

[AlexanderLea]

For those - like me - who arrive here from Google: the docs have a pretty concise summary (https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md)

[syslogic]

Auth & User can now be accessed alike:

import firebase from 'firebase/app';
import 'firebase/auth';

import Auth = firebase.auth.Auth;
import User = firebase.User;