javascriptangularfirebasefirebase-authenticationnebular

Firebase errors on page load after Angular upgrade


After upgrading to Angular 13 I'm having issues with auth mechanism. I'm using Nebular Auth over Firebase authentication with Azure. Currently on page load I'm getting this error:

zone.js:1063 Unhandled Promise rejection: (0 , tslib__WEBPACK_IMPORTED_MODULE_5__.__rest) is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: (0 , tslib__WEBPACK_IMPORTED_MODULE_5__.__rest) is not a function
    at new UserImpl (index-342f2197.js:1599:62)
    at Function._fromJSON (index-342f2197.js:1736:22)
    at index-342f2197.js:1865:32
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at ZoneDelegate.invoke (zone.js:372:1)
    at Zone.run (zone.js:134:1)
    at zone.js:1276:1
    at ZoneDelegate.invokeTask (zone.js:406:1) TypeError: (0 , tslib__WEBPACK_IMPORTED_MODULE_5__.__rest) is not a function
    at new UserImpl (http://localhost:4200/vendor.js:5601:60)
    at Function._fromJSON (http://localhost:4200/vendor.js:5831:18)
    at http://localhost:4200/vendor.js:6008:30
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost:4200/vendor.js:184170:24)
    at _next (http://localhost:4200/vendor.js:184192:9)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3497:26)
    at Zone.run (http://localhost:4200/polyfills.js:3259:43)
    at http://localhost:4200/polyfills.js:4401:36
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3531:31)

It originates in firebase-auth.js. mentioned function is also declared there:

function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

package.json excerpt:

"dependencies": {
    "@angular/animations": "^13.2.1",
    "@angular/cdk": "^13.2.1",
    "@angular/common": "^13.2.1",
    "@angular/compiler": "^13.2.1",
    "@angular/core": "^13.2.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "^13.2.1",
    "@angular/platform-browser": "^13.2.1",
    "@angular/platform-browser-dynamic": "^13.2.1",
    "@angular/router": "^13.2.1",
    "@nebular/auth": "^9.0.1",
    "@nebular/eva-icons": "9.0.1",
    "@nebular/firebase-auth": "^9.0.1",
    "@nebular/theme": "^9.0.1",
    "@ngrx/effects": "^13.0.2",
    "@ngrx/entity": "^13.0.2",
    "@ngrx/schematics": "^13.0.2",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "eva-icons": "^1.1.2",
    "firebase": "^9.4.0",
(...)

Nebular uses a backward-compatible version of Angular Fire (with compat packages).


Solution

  • It turned out that the problem was with the unnecessary and incorrect config of typescript. In tsconfig.json paths I had this line tslib" : ["node_modules/tslib/tslib.d.ts"] and that prevented proper helper resolution from tslib. Removal of this setting, which I found is no longer needed resolved the problem.