Description
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: #3059
If this is a firebase SDK issue I can open an issue over there.