After ng update to angular/fire 7 Function statements require a function name error

Angular: 12.x.x

Firebase: 9.4.1 ( also tried on 9.4.0 and other earlier versions)

AngularFire: 7.2.0

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

How to reproduce these conditions

Steps to set up and reproduce

After running ng update for angular/fire on an existing project, the angular project builds when doing a npm run start but upon looking at the dev server the project doesnt load in the browser.

Getting an error in the console from the vendor.js Uncaught SyntaxError: Function statements require a function name

When drilling into where in the compiled vendor packages I get the following excerpt: function(P){return mp.apply(this,arguments)}(g.auth);re(M,g.auth,"internal-error"),g.parameters.sitekey=M})()}getAssertedRecaptcha(){return re(this.recaptcha,this.auth,"internal-error"),this.recaptcha}} .......

When looking into that, it appears to stem from the firebase package.

Debug output

** Errors in the JavaScript console ** Uncaught SyntaxError: Function statements require a function name

function(P){return mp.apply(this,arguments)}(g.auth);re(M,g.auth,"internal-error"),g.parameters.sitekey=M})()}getAssertedRecaptcha(){return re(this.recaptcha,this.auth,"internal-error"),this.recaptcha}}class Jc{constructor(g,M){this.verificationId=g,this.onConfirmation=M}confirm(g){const M=$r._fromVerification(this.verificationId,g);return this.onConfirmation(M)}}function nf(P,g,M){return vl.apply(this,arguments)}function vl(){return(vl=(0,e.Z)(function*(P,g,M){const x=fr(P),Re=yield Ar(x,g,(0,v.m9)(M));return new Jc(Re,$e=>dn(x,$e))})).apply(this,arguments)}function Vd(P,g,M){return ms.apply(this,arguments)}function ms(){return(ms=(0,e.Z)(function*(P,g,M){const x=(0,v.m9)(P);yield Y(!1,x,"phone");const Re=yield Ar(x.auth,g,(0,v.m9)(M));return new Jc(Re,$e=>ni(x,$e))})).apply(this,arguments)}function $u(P,g,M){return Xc.apply(this,arguments)}function Xc(){return(Xc=(0,e.Z)(function*(P,g,M){const x=(0,v.m9)(P),Re=yield Ar(x.auth,g,(0,v.m9)(M));return new Jc(Re,$e=>mi(x,$e))})).apply(this,arguments)}function Ar(P,g,M){return Ql.apply(this,arguments)}function Ql(){return(Ql=(0,e.Z)(function*(P,g,M){var x;const Re=yield M.verify();try{let $e;if(re("string"==typeof Re,P,"argument-error"),re(M.type===Xs,P,"argument-error"),$e="string"==typeof g?{phoneNumber:g}:g,"session"in $e){const Qt=$e.session;if("phoneNumber"in $e)return re("enroll"===Qt.type,P,"internal-error"),(yield la(P,{idToken:Qt.credential,phoneEnrollmentInfo:{phoneNumber:$e.phoneNumber,recaptchaToken:Re}})).phoneSessionInfo.sessionInfo;{re("signin"===Qt.type,P,"internal-error");const mn=(null===(x=$e.multiFactorHint)||void 0===x?void 0:x.uid)||$e.multiFactorUid;return re(mn,P,"missing-multi-factor-info"),(yield Fd(P,{mfaPendingCredential:Qt.credential,mfaEnrollmentId:mn,phoneSignInInfo:{recaptchaToken:Re}})).phoneResponseInfo.sessionInfo}}{const{sessionInfo:Qt}=yield Mi(P,{phoneNumber:$e.phoneNumber,recaptchaToken:Re});return Qt}}finally{M._reset()}})).apply(this,arguments)}function Ks(P,g){return Ao.apply(this,arguments)}

Expected behavior

Angular project loads

Actual behavior

Nothing loads and error message above shows

This issue might be related: https://github.com/angular/angularfire/issues/3059

If this is a firebase SDK issue I can open an issue over there.

[hsubox76]

If you take a look at the linked issue in the Firebase JS SDK (https://github.com/firebase/firebase-js-sdk/issues/5674), users are reporting that setting extractLicenses to true fixes this. I’m not sure why, and suggested filing a bug with the Angular CLI repo but in the meantime this could be a workaround.

[dhrn]

Just upgraded the angular to 13 and this get fixed 😮