Auth is not a function when using compatibility in production build

[briandiloreto]

trafficstars

Version info

Angular: 13.3.0

Firebase: ^9.8.1

AngularFire: 7.3.0

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

How to reproduce these conditions

Steps to set up and reproduce

When a production build is served, we have an error with Firebase app.auth() is not found. This does not happen with a development build.

We are using the compatibility version of Angular Fire.

Debug output

** Errors in the JavaScript console **

main.ts:16 TypeError: Bt.auth is not a function at angular-fire-compat-auth.js:59:51 at rr.invoke (zone.js:409:30) at rr.run (zone.js:169:47) at value (core.mjs:25486:28) at angular-fire-compat-auth.js:59:23 at tn (angular-fire-compat.js:147:29) at we (angular-fire-compat-auth.js:58:116) at new Ue (angular-fire-compat-firestore.js:513:13) at Object.$e.ɵfac [as factory] (angular-fire-compat-firestore.js:584:1) at value (core.mjs:11477:35)

Expected behavior

Build runs on both development and production

Actual behavior

Build runs only in development

[AmitMY]

This is only happening when using angular's optimization: true in production which performs minification and tree-shaking. Is the angular/fire compatability code tested under these conditions?

[TomCockram]

I'm also getting this issue. As @AmitMY mentioned setting optimization: false gets rid of this issue. However, this increased my bundle size from 600kb to 4.09MB.

https://stackoverflow.com/questions/72713590/ye-auth-is-not-a-function-angular-fire

Can we please get some eyes on this??

[georgelviv]

Same issue

[avramz]

Same issue

[wkndmarkt]

Same issue with AngularFire 7.4.1

[weilinzung]

same issue 7.4.1

[mrnetforge]

Same

[spicemix]

I'm getting this even if not in a production build with [email protected], but not when using [email protected]. As in simply swapping those dependencies reveals or fixes the problem. Angularfire 7.4.1, latest everything else. Also affects app.performance it seems. Using compat as instructed here. A webpack issue?

ERROR TypeError: app.auth is not a function
    at angular-fire-compat-auth.js:59:51
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Zone.run (zone.js:134:43)
    at NgZone.runOutsideAngular (core.mjs:26253:28)
    at angular-fire-compat-auth.js:59:23
    at ɵcacheInstance (angular-fire-compat.js:147:29)
    at ɵauthFactory (angular-fire-compat-auth.js:58:130)
    at new AngularFirestore (angular-fire-compat-firestore.js:513:25)
    at Object.AngularFirestore_Factory [as factory] (angular-fire-compat-firestore.js:584:1)
    at R3Injector.hydrate (core.mjs:6877:35)

...and 9.9.3 didn't change this problem...

[weilinzung]

We got that from compat mode.

main.40b0c58e10208b51.js:formatted:104832 Unhandled Promise rejection: ut.auth is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: ut.auth is not a function

        pe.cc)(`${ut.name}.auth`, "AngularFireAuth", ut.name, ()=>{
            const De = Bt.runOutsideAngular(()=>ut.auth()); => 
            if (st && De.useEmulator(...st),
            ct && (De.tenantId = ct),

https://github.com/angular/angularfire/blob/d724d81eafe003d2ec18728998cec7682aaaaeec/src/compat/auth/auth.ts#L29

[aloisdasilva]

I'm getting this even if not in a production build with [email protected], but not when using [email protected]. As in simply swapping those dependencies reveals or fixes the problem. Angularfire 7.4.1, latest everything else. Also affects app.performance it seems. Using compat as instructed here. A webpack issue?

ERROR TypeError: app.auth is not a function
    at angular-fire-compat-auth.js:59:51
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Zone.run (zone.js:134:43)
    at NgZone.runOutsideAngular (core.mjs:26253:28)
    at angular-fire-compat-auth.js:59:23
    at ɵcacheInstance (angular-fire-compat.js:147:29)
    at ɵauthFactory (angular-fire-compat-auth.js:58:130)
    at new AngularFirestore (angular-fire-compat-firestore.js:513:25)
    at Object.AngularFirestore_Factory [as factory] (angular-fire-compat-firestore.js:584:1)
    at R3Injector.hydrate (core.mjs:6877:35)

I have firebase 9.9.1 and still have this issue :/

[spicemix]

My problem turned out to be having different versions of firebase dependencies at the same time. angularfire brings in firebase itself, so there's no need for a direct dependency. Remove both, and just add back in angularfire, and see if that helps.

[weilinzung]

@spicemix thanks, I can confirm that your find is working for us as well.

We tested because we have firebase as a dependency. For our use case, we need to have firebasse, but we changed it as devDependency now, and is working as normal again.

And, we have all the latest devDependencies as below:

"devDependencies": {
    "firebase": "^9.9.3",
    "firebase-admin": "^11.0.1",
    "firebase-tools": "^11.8.0"
}

[raybird]

app.module.ts

    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireRemoteConfigModule,
    AngularFireFunctionsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),

add provideAuth(() => getAuth()) gets rid of this issue and can build with optimization: true

    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireRemoteConfigModule,
    AngularFireFunctionsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth())

[EdmondMbadu]

I am having this issue as well. The problem occurs only in production. I was able to reproduce it locally, and it does have to do with collisions in my case between angular fire and firebase. I removed firebase completely, but I am still having the issue in prod.

[kavicastelo]

Same issue firebase - 9.23 @angular/fire - 7.5 Angular CLI - 15.2

[madmacc]

Same issue: "firebase": 9.0.2 "@angular/fire": 7.4.1

optimization: false fixed the issue but size is massive.

[severus1990]

Any updates on this issue other than optimization: false ?

[brq-cr]

"firebase": "9.23.0", "@angular/fire": "7.6.1",

fix the issue

optimization: false (is not required)

[pawaraditya0204]

I have installed the latest versions of Firebase, which are "firebase": "^10.10.0" and "@angular/fire": "^17.0.1". This resolved my issue without needing to set the optimization flag to false.

I am using the angular 15 cli but we dont have any @angular/[email protected] like this may be in this method you will get per deep issues

[kavyagamani]

I am also using the same version of firebase and angular 17 cli but i am not able to solve the issue..pls help me