I recently created a new NativeScript 8.2.3 project to do a redesign of an older existing project which was running on NativeScript 8.2.2.
I have installed this NativeScript-Firebase-Plugin via npm i @nativescript/firebase and added the plugin to the project via tns plugin add @nativescript/firebase. After adding the google-services.json to my App_Resources I have implemented the firebase.init() function to my app.component.ts like this:
import { Component, OnInit } from '@angular/core'
import { firebase } from "@nativescript/firebase";
@Component({
selector: 'ns-app',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
ngOnInit() {
firebase
.init()
.then(() => console.log("Firebase initialised!"))
.catch( err => console.error(`Error: ${err}`));
}
}
but after running ns debug android I get the following StackTrace:
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'ads' of undefined
System.err: File: (file: src/webpack:/mtbappmobile/webpack/bootstrap:27:0)
System.err:
System.err: StackTrace:
System.err: ./node_modules/@nativescript/firebase/firebase.android.js(file: src/webpack:/mtbappmobile/node_modules/@nativescript/firebase/firebase.android.js:24:0)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.component.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:174:80)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.module.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:206:72)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/main.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:14:73)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at __webpack_exec__(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:274:39)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:189)
System.err: at __webpack_require__.X(file: src/webpack:/mtbappmobile/webpack/runtime/startup entrypoint:6:0)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:47)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:280:3)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: Cannot read property 'ads' of undefined
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'ads' of undefined
System.err: File: (file: src/webpack:/mtbappmobile/webpack/bootstrap:27:0)
System.err:
System.err: StackTrace:
System.err: ./node_modules/@nativescript/firebase/firebase.android.js(file: src/webpack:/mtbappmobile/node_modules/@nativescript/firebase/firebase.android.js:24:0)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.component.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:174:80)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.module.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:206:72)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/main.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:14:73)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at __webpack_exec__(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:274:39)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:189)
System.err: at __webpack_require__.X(file: src/webpack:/mtbappmobile/webpack/runtime/startup entrypoint:6:0)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:47)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:280:3)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: Cannot read property 'ads' of undefined
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5876)
System.err: at android.app.ActivityThread.access$1100(ActivityThread.java:199)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1650)
System.err: at android.os.Handler.dispatchMessage(Handler.java:106)
System.err: at android.os.Looper.loop(Looper.java:193)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'ads' of undefined
System.err: File: (file: src/webpack:/mtbappmobile/webpack/bootstrap:27:0)
System.err:
System.err: StackTrace:
System.err: ./node_modules/@nativescript/firebase/firebase.android.js(file: src/webpack:/mtbappmobile/node_modules/@nativescript/firebase/firebase.android.js:24:0)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.component.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:174:80)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/app/app.module.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:206:72)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at fn(file: src/webpack:/mtbappmobile/webpack/runtime/hot module replacement:62:0)
System.err: at ./src/main.ts(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:14:73)
System.err: at __webpack_require__(file: src/webpack:/mtbappmobile/webpack/bootstrap:24:0)
System.err: at __webpack_exec__(file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:274:39)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:189)
System.err: at __webpack_require__.X(file: src/webpack:/mtbappmobile/webpack/runtime/startup entrypoint:6:0)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:275:47)
System.err: at (file:///data/data/com.maxtoolbox.vrsta/files/app/bundle.js:280:3)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: Cannot read property 'ads' of undefined
System.err: at com.tns.Runtime.runModule(Native Method)
System.err: at com.tns.Runtime.runModule(Runtime.java:689)
System.err: at com.tns.Runtime.run(Runtime.java:681)
System.err: at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err: at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5871)
System.err: ... 8 more
The app is running fine when I remove the firebase.init() function. Do you have an idea what causes this issue and how to resolve it?
here is my package.json:
{
"name": "mtbappmobile",
"main": "src/main.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "~13.1.1",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/forms": "~13.1.1",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/router": "~13.1.1",
"@nativescript/angular": "^13.0.0",
"@nativescript/core": "~8.2.1",
"@nativescript/firebase": "^11.1.0",
"@nativescript/theme": "~3.0.1",
"nativescript": "^8.2.3",
"nativescript-sentry": "^2.0.1",
"rxjs": "~7.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.1",
"@angular/compiler-cli": "~13.1.1",
"@nativescript/android": "8.2.2",
"@nativescript/ios": "~8.2.0",
"@nativescript/types": "~8.2.0",
"@nativescript/webpack": "~5.0.0",
"@ngtools/webpack": "~13.1.1",
"typescript": "~4.5.5"
}
}
There is a rewritten version of that plugin maintained by the Nativescript TSC. Take a look at it https://github.com/NativeScript/firebase
npm install @nativescript/firebase-core
npm install @nativescript/firebase-auth
npm install @nativescript/firebase-storage
// And other Firebase packages you would like to use
In your application's main file (for example, app/app.js) init the firebase modules as soon as possible
import { firebase } from '@nativescript/firebase-core'
import '@nativescript/firebase-auth'; // only needs to be imported 1x
import '@nativescript/firebase-storage'; // only needs to be imported 1x
// And other Firebase packages
firebase().initializeApp().then(fbApp => {
console.log("Firebase app initialized!", fbApp.name)
// To use with the Firebase Emulator
// firebase().auth().useEmulator('localhost', 9099);
// firebase().storage().useEmulator('localhost', 9199);
// ... and other emulator ports
firebase().auth().addAuthStateChangeListener(async (user) => {
if (!user) {
// User is currently signed out!
} else {
// User is signed in!
}
})
// Other modules' init functions
}