2

I'm following a Polymer + Firebase tutorial video using the Polymer App Tool Kit (initiated with the polymer CLI).

When I try to push data to a Firebase collection, I get the following error:

Cannot read property 'push' of undefined'

Here's my code (firebase app is initiated in my-app.html with name "firebase-app"):

<dom-module id="add-model">
    <!-- Defines the element's style and local DOM -->
    <template>
        <firebase-auth user="{{user}}" app-name="firebase-app"></firebase-auth>
        <firebase-query
                app-name="firebase-app"
                id="query"
                path="/users/[[user.uid]]/models"
                data="{{model}}">
        </firebase-query>
        <paper-input id="modelName" label="Model Name" "></paper-input>
        <paper-button class="create" id="create" on-tap="create" raised>Create</paper-button>
    </template>
    <!-- Creates the element's prototype and registers it -->
    <script>
        Polymer({
            is: 'add-model',
            properties: {
                data: {
                    type: Object
                }
            },
            create: function() {
               this.$.query.ref.push({
                   name: this.$.modelName.value
                });
            }
        });
    </script>
</dom-module>
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Dxx
  • 934
  • 2
  • 11
  • 41

1 Answers1

2

First, I recommend comparing your code to the Polycast #58 source in GitHub, which might reveal the problem more clearly to you.

this.$.query.ref (<firebase-query>.ref) refers to the ref property of Polymer.FirebaseDatabaseBehavior, which is computed with:

__computeRef: function(db, path) {
  if (db == null ||
      path == null ||
      !this.__pathReady(path) ||
      this.disabled) {
    return null;
  }

  return db.ref(path);
},

Note that db.ref(path) never returns null, so ref being null must be a result of the if statement. Evaluating each condition might uncover the issue:

  • db == null

    • This property is computed from app.database() (never returns null), or is set to null when app is not defined (by <firebase-app>). Have you declared <firebase-app> with the proper app-name before importing the element that uses <firebase-query>?

  • path == null

  • !this.__pathReady(path)

    • One of the path components might be an empty string or uninitialized. For your path (/users/[[user.uid]]/models), it's possible that user is not yet defined (user is not yet logged in), which results in an empty string in that path component (/users//models).

  • this.disabled

tony19
  • 125,647
  • 18
  • 229
  • 307
  • Amazing, logical, and well-explained answer! Turns out the problem lies with the first point: firebase-app is not properly imported: I have my firebase-app configuration in a another module `` so I can easily reuse the firebase data in my app. `` is in my main app container view (`my-app.html`). If I move `` from `my-app.html` to `add-model.html` it works, but I have functionality in `my-app.html` which also requires ``. Loading the module twice returns `Uncaught Error: Firebase App named 'firebase-app' already exists.` – Dxx Jan 03 '17 at 10:49
  • Posted a new question regarding my previous comment: https://stackoverflow.com/questions/41443228/polymer-firebase-polymerfire-firebase-query-not-working-inside-single-pag Thanks again for the in-depth explanation. – Dxx Jan 03 '17 at 12:09
  • @Dean No problem :) – tony19 Jan 03 '17 at 12:24
  • Can you have a look at my other question (link in 2nd comment)? It's what I'm running into regarding declaring `` in my application. I've been at it all morning but haven't been able to solve it. – Dxx Jan 03 '17 at 13:03
  • Sure, I'll try to answer later today if nobody gets to it. – tony19 Jan 03 '17 at 13:12