No exported member error with firebase when trying to compile angular 10 project

Question

I installed an angular dashboard template which I tested with ng serve to confirm worked. I then run

npm install firebase @angular/fire --save

to install firebase. And after adding firebase project credentials and editing the app.module.ts

    import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    import { AuthInterceptor, AuthService, FakeBackendInterceptor } from '@services/*';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ChartsModule } from './pages/charts';
    import { ComponentsModule } from './pages/components';
    import { DashboardModule } from './pages/dashboard';
    import { Dashboard2Module } from './pages/dashboard2';
    import { FormsModule } from './pages/forms';

    import { AngularFireModule } from "@angular/fire";
    import { AngularFireAuthModule } from "@angular/fire/auth";
    import { AngularFirestoreModule } from '@angular/fire/firestore';
    import { environment } from '../environments/environment';

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ComponentsModule,
        DashboardModule,
        Dashboard2Module,
        FormsModule,
        ChartsModule,
        HttpClientModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireAuthModule,
        AngularFirestoreModule, 
      ],
      providers: [
        AuthService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthInterceptor,
          multi: true,
        },
        {
          provide: HTTP_INTERCEPTORS,
          useClass: FakeBackendInterceptor,
          multi: true,
        },
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

I get the following errors when I try to compile.

    ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module '"../../firebase"' has no exported member 'analytics'. Did you mean to use 'import analytics from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
               ~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:21 - error TS2614: Module '"../../firebase"' has no exported member 'app'. Did you mean to use 'import app from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                          ~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                               ~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:32 - error TS2614: Module '"../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                     ~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:42 - error TS2614: Module '"../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                               ~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:53 - error TS2614: Module '"../../firebase"' has no exported member 'functions'. Did you mean to use 'import functions from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                                          ~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:64 - error TS2614: Module '"../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                                                     ~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:75 - error TS2614: Module '"../../firebase"' has no exported member 'performance'. Did you mean to use 'import performance from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                                                                ~~~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:88 - error TS2614: Module '"../../firebase"' has no exported member 'remoteConfig'. Did you mean to use 'import remoteConfig from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                                                                             ~~~~~~~~~~~~
    node_modules/@angular/fire/firebase.app.module.d.ts:2:102 - error TS2614: Module '"../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../firebase"' instead?

    2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
                                                                                                           ~~~~~~~
    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';
                     ~~~~
    node_modules/@angular/fire/auth/auth.d.ts:12:14 - error TS2411: Property 'authState' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.

    12     readonly authState: Observable<User | null>;
                    ~~~~~~~~~
    node_modules/@angular/fire/auth/auth.d.ts:16:14 - error TS2411: Property 'idToken' of type 'Observable<string>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.

    16     readonly idToken: Observable<string | null>;
                    ~~~~~~~
    node_modules/@angular/fire/auth/auth.d.ts:20:14 - error TS2411: Property 'user' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.

    20     readonly user: Observable<User | null>;
                    ~~~~
    node_modules/@angular/fire/auth/auth.d.ts:26:14 - error TS2411: Property 'idTokenResult' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.

    26     readonly idTokenResult: Observable<auth.IdTokenResult | null>;
                    ~~~~~~~~~~~~~
    node_modules/@angular/fire/firestore/interfaces.d.ts:2:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead?

    2 import { firestore } from 'firebase/app';
               ~~~~~~~~~
    node_modules/@angular/fire/firestore/collection/collection.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?

    2 import { firestore } from 'firebase/app';
               ~~~~~~~~~
    node_modules/@angular/fire/firestore/document/document.d.ts:5:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?

    5m import { firestore } from 'firebase/app';
               ~~~~~~~~~
    node_modules/@angular/fire/firestore/collection-group/collection-group.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?
    2 import { firestore } from 'firebase/app';
               ~~~~~~~~~
    node_modules/@angular/fire/firestore/firestore.d.ts:8:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead?

    8 import { firestore } from 'firebase/app';

But I cant figure out the cause of the errors. I have tried looking at several online tutorials for integrating firebase with angular but I cant see anything wrong

UPDATE

Attempted following the tutorial in https://www.positronx.io/full-angular-7-firebase-authentication-system/ word for word but I am still getting the same type of error

score 6 · Answer 1 · answered Oct 30 '20 at 16:50

6

There is a valid workaround that does not require a downgrade of firebase (from 8.0 to 7.x as previously proposed).

Please see my separate answer / proposed solution here.

answered Oct 30 '20 at 16:50

Marc

2,183
2
11
16

score 6 · Answer 2 · edited Jul 24 '21 at 13:45

6

I had a similar issue.

Was able to solve it by installing firebase@7.24.0

npm i firebase@7.24.0
ng serve

Hope it will help. Thanks.

edited Jul 24 '21 at 13:45

Ian Campbell

23,484
14
36
57

answered Jul 03 '21 at 23:54

Chetan Paliwal

61
1
2

score 5 · Answer 3 · answered Sep 23 '21 at 11:37

For anyone new here Follow angular fire quick start guide https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

Changing

    import { AngularFireModule } from "@angular/fire";

To

    import { AngularFireModule } from '@angular/fire/compat';

Worked for me

you can follow documentation for more help https://github.com/angular/angularfire/blob/master/docs/firestore/documents.md

score 4 · Accepted Answer · edited Oct 29 '20 at 09:46

4

I had a similar problem with Angular using Ionic, but after saving all the files and compiling again, the problem was gone. Why? I don't know, but in other projects I had similar situations.

Try to change something irrelevant (like adding some spaces between the lines) of each file you have been editing and save them before compiling.

edited Oct 29 '20 at 09:46

David Buck

3,752
35
31
35

answered Oct 29 '20 at 08:39

Rolo

64
2

Hi @Rolo thanks for the response. let me go over it again and try – appdevnoobie Oct 29 '20 at 08:53
3

Hi @Rolo .... found the issue. I used firebase@7.24.0 to solve the problem. thanks – appdevnoobie Oct 29 '20 at 09:49
1

This issue has been resolved in angularfire 6.0.4. Just update to the latest version. – Carrie M. Nov 02 '20 at 23:06
1

thanks, it's a goog solution. In fact, I used Marc's solution and works fine too (for now) – Rolo Nov 02 '20 at 23:35

score 3 · Answer 5 · answered Oct 02 '21 at 19:19

3

The error is related to the version of firebase. Your firebase is likely greater than version 8.

peer firebase@"^7.0 || ^8.0" from @angular/fire@6.1.5

@angular/fire requires firebase to be either at 7.0 or 8.0.

Run npm uninstall firebase and then npm i firebase@8.0. That worked for me.

answered Oct 02 '21 at 19:19

Darrow Hartman

4,142
2
17
36

This was great. I had forgotten to update my firebase after updating Angular / AngularFire and all my other dependencies. The revisions didn't match and caused the messy errors that the OP had mentioned. Running an ng update firebase fixed the issue. Never would've thought of it, had this comment not pointed out the problem with revisions. – Tom L'esperance Dec 17 '22 at 10:38
@TomL'esperance glad I could be of assistance! – Darrow Hartman Dec 23 '22 at 06:45

score 2 · Answer 6 · answered Aug 27 '21 at 03:30

2

import firebase from 'firebase/app';

This worked for me.

answered Aug 27 '21 at 03:30

Krishna Santosh Nidri

380
2
10

No exported member error with firebase when trying to compile angular 10 project

6 Answers6

Linked