TypeError: Cannot read property 'firebase' of undefined

[mi6crazyheart]

I'm using this plugin in my new Nativescript project & getting following error -

JS: Clicked on Login button JS: Error in firebase.init: TypeError: Cannot read property 'firebase' of undefined JS: firebase.init error: TypeError: Cannot read property 'firebase' of undefined

Here is the link of my Stackoverflow post : http://stackoverflow.com/questions/37565864/typeerror-cannot-read-property-firebase-of-undefined-in-nativescript-app

As, totally new to both NativeScript & TypeScript I can't able to understand how to solve it.

[441N143G]

import firebase = require("nativescript-plugin-firebase");
in reference.d.ts add /// <reference path="./node_modules/nativescript-plugin-firebase/firebase" />(without extensions)

[mi6crazyheart]

When I'm doing changes in "reference.d.ts" file, following error I'm getting

[441N143G]

No) u must add this line in reference.d.ts in root dir of project)

[mi6crazyheart]

@441N143G : Sorry, I added the wrong screenshot. Now, I've updated my Screenshot. You can see.

[mi6crazyheart]

I think, I need to add "extension" in the path. But, which 'ts' file I need to point. There are 2 'ts' files.

• firebase-common.d.ts
• firebase.d.ts

By, adding extension to the file path error is getting resolved. But, I don't understand to which TS file I need to point.

[441N143G]

Can u make screen with project structure?

[mi6crazyheart]

Here is the folder structure of my application

[441N143G]

Maybe this help: This is how looks files in my test app (native, angular2, firebase, created with: tns create tesеApp --ng) (works as expected):
reference.dt.ts(in root folder):
/// <reference path="./node_modules/tns-core-modules/tns-core-modules.d.ts" /> Needed for autocompletion and compilation. /// <reference path="./node_modules/nativescript-plugin-firebase/firebase" />
app.component.ts:
import {Component} from "@angular/core"; import firebase = require("nativescript-plugin-firebase"); @Component({ ... export class AppComponent { public counter: number = 16; constructor() { firebase.init(<any>{ persist: true // Allow disk persistence. Default false. }).then( function(instance) { console.log("firebase.init done"); }, function(error) { console.log("firebase.init error: " + error); } ); ...

[mi6crazyheart]

Can you tell which file path I should give in "reference path" link ? It should point to firebase-common.d.ts or firebase.d.ts ?

[441N143G]

in my project - firebase.d.ts

[mi6crazyheart]

If I point reference path link to "firebase.d.ts" then IntelliSense is not giving any error. But, at the compiling time, I'm getting the same error.

JS: Clicked on Login button
JS: Error in firebase.init: TypeError: Cannot read property 'firebase' of undefined
JS: firebase.init error: TypeError: Cannot read property 'firebase' of undefined

[mi6crazyheart]

Is following code is fine ?

import {Component} from "@angular/core";
import {User} from "./shared/user/user";
import {UserService} from "./shared/user/user.service";
import {HTTP_PROVIDERS} from "@angular/http";
import firebase = require("nativescript-plugin-firebase");

@Component({
  selector: "my-app",
  providers: [UserService, HTTP_PROVIDERS],
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})

export class AppComponent {
    user: User;
    isLoggingIn = true;

    constructor(private _userService: UserService) {
        this.user = new User();
    }

    submit() {
        if (this.isLoggingIn) {
            this.login();
        } else {
            this.signUp();
        }
    }

    login() {
        // TODO: Define
        console.log('Clicked on Login button');

        firebase.init(<any>{
            persist: true // Allow disk persistence. Default false.
        }).then(
            function (instance) {
                console.log("firebase.init done");
            },
            function (error) {
                console.log("firebase.init error: " + error);
            }
        );
    }

    signUp() {
        this._userService.register(this.user);
    }

    toggleDisplay() {
        this.isLoggingIn = !this.isLoggingIn;
    }
}

[441N143G]

can u put firebase.init(... in constructor() - just 4 test?

[mi6crazyheart]

I did that also when I saw in your code. But, that's also giving me the same error.

[441N143G]

error when app just starting or after tap event?(with code in constructor)

[mi6crazyheart]

I'm using tns livesync android --watch . So, just after saving the file when compiler start compiling once again.. I'm getting that error.

[441N143G]

Do u do this: google-services.json which you'll add to your NativeScript project at platforms/android/google-services.json ?

[mi6crazyheart]

YES. I've setup that also. But, does that can be the reason for the error - " Cannot read property 'firebase' of undefined" ? I don't feel so. I can also be wrong.

[441N143G]

it's seems your code want execute "undefined.firebase". u have many way to get undefined) i thought there something like this: some code try execute "this.firebase...." but context of "this" is lost. Maybe author of plugin will help u better.

[mi6crazyheart]

@441N143G : Just for curiosity here is my package.json file. Is it fine or there is some problem.

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.bhramaan",
    "tns-android": {
      "version": "2.0.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/platform-server": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "nativescript-angular": "0.1.1",
    "nativescript-plugin-firebase": "^3.0.1",
    "tns-core-modules": "^2.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.9.0",
    "babel-types": "6.9.0",
    "babylon": "6.8.0",
    "filewalker": "0.1.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  },
  "android": {
    "defaultConfig": {
        "applicationId" : "org.nativescript.bhramaan"
    }
  }
}

[441N143G]

Maybe try create clear project with: tns ctreate myMegaProj --ng ?) if u'll have same trouble when added plugin - u can use any native "sugar" without plugins - just read docs: https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript

[mi6crazyheart]

@441N143G - As I told you yesterday that, I'm using tns livesync android --watch at the time of development. But today, I discovered a build issue when I'm once tried the command tns run android. For that I've open an issue at here - #41

But, plugin author is telling it's not seems plugin related issue. But, now I feel all these issue are coming because of that build issue. If I can able to resolve that one then, may be this issue also get resolve.

But, I've no idea what's the problem & where is the issue is. Currently thinking, to open an issue in 'NativeScript' repository it self.

[mi6crazyheart]

As issue - #41 resolved which also resolved this ongoing issue I'm going to close the thread. @441N143G Again, thank you a lot.

[441N143G]

u are welcome)

[Melf11]

i had the same problem and finally just reinstalled plugin
npm plugin remove nativescript-plugin-firebase
npm plugin add nativescript-plugin-firebase