Polymerfire TypeError

Question

I am new to Polymer and I'm trying to save user data using Firebase-document component.

Here are the relevant code snippets:

Component initialization:

    <firebase-document id="document" app-name="nameoftheapp"
                       path="[[userDataPath]]" data="{{userData}}">
    </firebase-document>

And the javascript part:

    Polymer({
        is: 'registration-view',

        properties: {
            userData: Object,
            userDataPath: {
                type: String,
                notify: true
            }
        },

        debugFunction: function () {
            user = this.domHost.user;
            this.userDataPath = '/users/' + user.uid;
            this.userData.firstName = "fname";
            this.userData.lastName = "lname";
            console.log(user);
            console.log(this.userDataPath);
            this.$.document.save(this.userDataPath).then(function () {
                console.log("success");
            });
        }, 
        ......

When I call the debug function i get the

Uncaught (in promise) TypeError: c[b] is not a function(…).

Stacktrace:

1) debugFunction @ registration-view.html:106
2) save @ firebase-document.html:82
3) (anonymous function) @ firebase-document.html:93
4) c @ firebase-app.js:formatted:939

The error is thrown in the minimized firebase-app.js file so I am not very smart from that. Everything is hopefully configured properly. The user authentication works well, app name is also fine(if it weren't the app not initialized error would be thrown).

I tried to mock the data in the database and the firebase-document doesn't load them. I set the database rules so that the data are public to eliminate the potential authorization problems but it didn't help.

{
  "rules": {
//     ".read": "auth != null",
    ".read": true,
//     ".write": "auth != null"
    ".write": true
  }
}

Attempt 2:

I found another way how to save the data and here is the code:

<firebase-document id="document" app-name="doctor-appointment-system" log>
</firebase-document>

Javascript part:

    debugFunction: function () {
        this.$.document.path = null;
        this.$.document.data = {
            'firstName': this.$.fninput.value,
            'lastName': this.$.lninput.value
        };
        console.log('users/' +  this.domHost.user.uid);
        this.$.document.save('users',  this.domHost.user.uid);
    },

With this setup I am getting another error. Here is the output from console:

users/Z5uAEYO2S1g2JYClpkk1Vtw130i2

app-storage-behavior.html:350 Setting Firebase value at users/Z5uAEYO2S1g2JYClpkk1Vtw130i2 to Object {firstName: "", lastName: ""}

firebase-database-behavior.html:61 Uncaught (in promise) TypeError: Cannot read property 'ref' of undefined(…)_setFirebaseValue

It fails on the following line in firebase-database-behaviour.html:

var result = this.db.ref(path).set(leaf ? value.$val : value);

it looks like there is some problem with configuration but the authentication works fine so I am clueless.

I'm stuck on this one so any help will be appreciated.

Thanks, Jan

Answer 1

I found a solution but I am still not sure what was the essence of the issue. The structure of my application is that of a single page app. I have a core-scaffold element which consists of toolbar, app-route, iron-pages and firebase-auth element. The code above was situated in an registration-view which is lazy loaded by iron-pages when the adequate URL matches. I tried to move the code directly to the core-scaffold file and everything worked fine. And surprisingly when I called the code in registration view it also worked. It turned out that if I import the firebase-document.html in the core-scaffold.html the error won't be thrown in the children.

If anyone explains what is the cause I'll be grateful.

Thanks, Jan