Polymerfire - Cannot read property 'push' of undefined

Question

I have problem similar to this, except that I'm using polymer template from this.

I imported all polymerfire references both in the page where <firebase-app> is declared and in the page where <firebase-query> is used. Not working.

I found later that the template uses polymerfire which version is v0.9.4 instead of the latest v0.10.3. I tried uninstalling and re-installing the new version. Nothing changed.

For additional information, here's a snippet of the code:

src/app-auth/app-auth-firebase.html

<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-query.html">
...
<firebase-app name="pwa-demo" api-key="abc" auth-domain="abc" database-url="abc"></firebase-app>

<firebase-auth id="auth" app-name="pwa-demo" signed-in="{{_signedIn}}" user="{{_user}}"on-error="_onAuthError"></firebase-auth>

src/app-pages/app-page-new-stuff/app-page-new-stuff.html

<link rel="import" href="../../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../../../bower_components/polymerfire/polymerfire.html">
...
<firebase-auth user="{{user}}"></firebase-auth>

<firebase-query id="stuffquery" app-name="pwa-demo" path="/users/[[user.uid]]/events" data="{{events}}"> </firebase-query>
...
_onFormSubmit: function() {   
    this.$.stuffquery.ref.push({
        title: this.$.piTitle.value
    });
}

Is there anything else that I'm missing? Please help.

EDIT: I found two other weird things, which might be helpful. First, I couldn't do both retrieving the data and pushing the data from and to my app. Second, when I attempt to run firebase.database() in browser console, I got "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."

Anyone?

score 2 · Accepted Answer · edited May 23 '17 at 11:54

After days of frustration, it works. Apparently.

TL;DR

What I did is updating polymerfire and omitting the name attribute from any firebase element.

Explanation

Looking at this, it seems firebase initializes the app in __computeApp method and name is an optional variable but will be used in initialization if it is provided. Ignore it and everything should be okay. In my case, it works both for <firebase-app>, <firebase-auth>, and <firebase-query> (for pushing data, because i'm still stuck in using firebase-query for fetching data)

While it works in my case, it might not necessarily the right solution. It might not work in your case. It took me days to figure it out so for those who are in similar problems, one of these might help:

Inspect firebase query attribute. Refer to this
Try import polymerfire/polymerfire.html in the same html file where <firebase-app> is declared. Refer to this
Update polymerfire. Simply uninstall and reinstall it might solve the case (for those with outdated version of polymerfire)
Omit name attribute from any firebase element. I know my <firebase-app> is successfully initialized when I type firebase.database() in browser console, it doesn't give error anymore.

Hope it helps.

Polymerfire - Cannot read property 'push' of undefined

1 Answers1