Search code examples
angularfirebaseloggingionic4

Ionic 4 (not capacitor) build failed with @firebase/logger error [TS1068: An accessor cannot be declared in an ambient context]

Ionic build is failing after adding firebase and @angular/fire to my project. I have been using firebase and angularFire for ages, but suddenly this issue came up at build.

Seems to be with a file logger.d.ts related issue, however, I am not even using firebase's Logger. Must be some inside call, searched web for hours but could not find an answer, hopefully someone might have come across this issue earlier? can shed some light?

below is the error message image

enter image description here

> ng run app:build

ERROR in node_modules/@firebase/logger/dist/src/logger.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.

70     get logLevel(): LogLevel;
           ~~~~~~~~
node_modules/@firebase/logger/dist/src/logger.d.ts:71:9 - error TS1086: An accessor cannot be declared in an ambient context.

71     set logLevel(val: LogLevel);
           ~~~~~~~~
node_modules/@firebase/logger/dist/src/logger.d.ts:77:9 - error TS1086: An accessor cannot be declared in an ambient context.

77     get logHandler(): LogHandler;
           ~~~~~~~~~~
node_modules/@firebase/logger/dist/src/logger.d.ts:78:9 - error TS1086: An accessor cannot be declared in an ambient context.

78     set logHandler(val: LogHandler);
           ~~~~~~~~~~
node_modules/@firebase/logger/dist/src/logger.d.ts:83:9 - error TS1086: An accessor cannot be declared in an ambient context.

83     get userLogHandler(): LogHandler | null;
           ~~~~~~~~~~~~~~
node_modules/@firebase/logger/dist/src/logger.d.ts:84:9 - error TS1086: An accessor cannot be declared in an ambient context.

84     set userLogHandler(val: LogHandler | null);
           ~~~~~~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.

        ng run app:build exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

My package.json looks like the following

"dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/device": "^5.23.0",
    "@ionic-native/http": "^5.23.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "cordova-android": "8.1.0",
    "cordova-ios": "5.1.1",
    "cordova-plugin-advanced-http": "^2.4.1",
    "cordova-plugin-file": "^6.0.2",
    "core-js": "^2.5.4",
    "firebase": "^7.13.1",
    "lodash": "^4.17.15",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.149",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "npm-force-resolutions": "0.0.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },

Please help if someone can.

Solution

  • Solution 1

    You need to use TypeScript 3.7.
    From TypeScript 3.7 release notes :

    To detect the issue around accessors, TypeScript 3.7 will now emit get/set accessors in .d.ts files so that in TypeScript can check for overridden accessors.

    So you'll need to either upgrade to TypeScript 3.7 or use an earlier version of Firebase.

    Solution 2

    Set skipLibCheck to true in your tsconfig.json. 

    "compilerOptions": {
  "skipLibCheck": true,
  ...
}