Skip to content

AngularFire is not compatible with Firebase JS SDK v8 #2619

Closed
Closed
AngularFire is not compatible with Firebase JS SDK v8#2619

Description

@sarunint
sarunint
opened on Oct 27, 2020

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.

Activity

  1. jamesdaniels commented on Oct 30, 2020

    @jamesdaniels
    jamesdaniels
    on Oct 30, 2020
    Contributor

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

  2. jamesdaniels commented on Oct 30, 2020

    @jamesdaniels
    jamesdaniels
    on Oct 30, 2020
    Contributor

    Releasing 6.0.4 with support for v8 later today.

  3. jamesdaniels
    closed this as completedon Oct 30, 2020

  4. sarunint commented on Nov 1, 2020

    @sarunint
    sarunint
    on Nov 1, 2020
    ContributorAuthor

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

  5. dusanradojcic00 commented on Nov 20, 2020

    @dusanradojcic00
    dusanradojcic00
    on Nov 20, 2020

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

    image

    image

  6. jamesdaniels commented on Nov 20, 2020

    @jamesdaniels
    jamesdaniels
    on Nov 20, 2020
    Contributor

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

    image

    image

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

  7. dusanradojcic00 commented on Nov 20, 2020

    @dusanradojcic00
    dusanradojcic00
    on Nov 20, 2020

    Yeah. It works now, thanks!

  8. wizjamin commented on Nov 26, 2020

    @wizjamin
    wizjamin
    on Nov 26, 2020

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

  9. dusanradojcic00 commented on Nov 26, 2020

    @dusanradojcic00
    dusanradojcic00
    on Nov 26, 2020

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

  10. IvanNavarroCode commented on Dec 11, 2020

    @IvanNavarroCode
    IvanNavarroCode
    on Dec 11, 2020

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

  11. Reprevise commented on Dec 17, 2020

    @Reprevise
    Reprevise
    on Dec 17, 2020

    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

  12. eduardovpessoa commented on Dec 21, 2020

    @eduardovpessoa
    eduardovpessoa
    on Dec 21, 2020

    @Reprevise same here! =(

  13. shadowboxingskills commented on Dec 21, 2020

    @shadowboxingskills
    shadowboxingskills
    on Dec 21, 2020

    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

  14. Villanuevand commented on Dec 21, 2020

    @Villanuevand
    Villanuevand
    on Dec 21, 2020
    Contributor

    @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

  15. jamesdaniels commented on Dec 21, 2020

    @jamesdaniels
    jamesdaniels
    on Dec 21, 2020
    Contributor

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

  16. QuentinFarizon commented on Dec 22, 2020

    @QuentinFarizon
    QuentinFarizon
    on Dec 22, 2020

    I have :

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

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

  17. jamesdaniels commented on Dec 22, 2020

    @jamesdaniels
    jamesdaniels
    on Dec 22, 2020
    Contributor

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

  18. AlexanderLea commented on Feb 22, 2021

    @AlexanderLea
    AlexanderLea
    on Feb 22, 2021

    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)

  19. syslogic commented on Aug 23, 2021

    @syslogic
    syslogic
    on Aug 23, 2021

    Auth & User can now be accessed alike:

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

import Auth = firebase.auth.Auth;
import User = firebase.User;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions