title: Polymer 1.2 FIREBASE WARNING: Exception was thrown by user callback
body: <p>I have some issues with polymer and firebase, I managed to insert data into firebase but it throws an error </p>
  
  <pre><code>FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null
  </code></pre>
  
  <p>Below its my code so far.</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  --&gt;
  
  &lt;html lang=""&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="generator" content="Polymer Starter Kit" /&gt;
    &lt;title&gt;Soulmatters&lt;/title&gt;
    &lt;!-- Place favicon.ico in the `app/` directory --&gt;
  
    &lt;!-- Chrome for Android theme color --&gt;
    &lt;meta name="theme-color" content="#2E3AA1"&gt;
  
    &lt;!-- Web Application Manifest --&gt;
    &lt;link rel="manifest" href="manifest.json"&gt;
  
    &lt;!-- Tile color for Win8 --&gt;
    &lt;meta name="msapplication-TileColor" content="#3372DF"&gt;
  
    &lt;!-- Add to homescreen for Chrome on Android --&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="application-name" content="PSK"&gt;
    &lt;link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"&gt;
  
    &lt;!-- Add to homescreen for Safari on iOS --&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
    &lt;meta name="apple-mobile-web-app-title" content="Polymer Starter Kit"&gt;
    &lt;link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"&gt;
  
    &lt;!-- Tile icon for Win8 (144x144) --&gt;
    &lt;meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"&gt;
  
    &lt;!-- build:css styles/main.css --&gt;
    &lt;link rel="stylesheet" href="styles/main.css"&gt;
    &lt;!-- endbuild--&gt;
  
    &lt;!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --&gt;
    &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
    &lt;!-- endbuild --&gt;
  
    &lt;!-- will be replaced with elements/elements.vulcanized.html --&gt;
    &lt;link rel="import" href="elements/elements.html"&gt;
    &lt;link rel="import" href="../bower_components/firebase-element/firebase-auth.html"&gt;
  &lt;link rel="import" href="../bower_components/firebase-element/firebase.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-input/paper-input.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-button/paper-button.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-icons/iron-icons.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-icon/iron-icon.html"&gt;
    &lt;!-- endreplace--&gt;
  
    &lt;!-- For shared styles, shared-styles.html import in elements.html --&gt;
    &lt;style is="custom-style" include="shared-styles"&gt;
  body {
    font-family: Roboto, sans-serif;
    color: #333;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }
  
  form {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
  }
  
  paper-button {
    flex-shrink: 1;
  }
  paper-input {
    flex-grow: 1;
  }
  
  paper-checkbox {
    display: inline-block;
    margin: 5px 0;
    transition: opacity 0.3s;
  }
  
  paper-checkbox[checked] {
    opacity: 0.5;
  }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body unresolved class="fullbleed layout vertical"&gt;
    &lt;span id="browser-sync-binding"&gt;&lt;/span&gt;
    &lt;template is="dom-bind" id="app"&gt;
  &lt;firebase-auth
    auto-login
    redirect
    location="[[firebaseURL]]"
    provider="[[firebaseProvider]]"
    on-error="onFirebaseError"
    on-login="onFirebaseLogin"&gt;&lt;/firebase-auth&gt;
  &lt;paper-toast id="errorToast"&gt;&lt;/paper-toast&gt;
  
  
     &lt;form on-submit="addItem"&gt;
        &lt;paper-input value="{{articolNou}}" 
          placeholder="Enter your item here..."&gt;&lt;/paper-input&gt;
        &lt;paper-button on-click="addItem"&gt;Add&lt;/paper-button&gt;
      &lt;/form&gt;
      &lt;template is="dom-repeat" items="{{articol}}"&gt;
        &lt;div&gt;
         &lt;div&gt;{{articolNou}}&lt;/div&gt;
        &lt;/div&gt;
  
   &lt;/template&gt;
    &lt;/template&gt;
  
    &lt;!-- build:js scripts/app.js --&gt;
    &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
    &lt;!-- endbuild--&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the app.js</p>
  
  <pre><code>(function(document) {
    'use strict';
  
    var app = document.querySelector('#app');
  
  
  
    app.articole = [];
  
  app.updateArticole = function(snapshot) {
    this.articole = ['articole'];
    snapshot.forEach(function(childSnapshot) {
      var item = childSnapshot.val();
      item.uid = childSnapshot.key();
      this.push('articole', item);
    }.bind(this));
  };
  
  
  app.addItem = function(event) {
    event.preventDefault(); // Don't send the form!
    this.ref.push({
      text: app.articolNou
    });
    app.articolNou = '';
  };
  
  /*app.toggleItem = function(event) {
    this.ref.
      child(event.model.item.uid).
      update({done: event.model.item.done});
  };
  
  app.deleteItem = function(event) {
    this.ref.child(event.model.item.uid).remove();
  };
  */
  
  
  app.firebaseURL = 'https://soulmatters.firebaseio.com';
  app.firebaseProvider = 'google';
  
  
  app.onFirebaseError = function(event) {
    this.$.errorToast.text = event.detail.message;
    this.$.errorToast.show();
  };
  
  app.onFirebaseLogin = function(event) {
    this.ref = new Firebase(this.firebaseURL + '/user/' + 
                                                    event.detail.user.uid);
    this.ref.on('value', function(snapshot) {
      this.updateArticole(snapshot);
    });
  };
  })(document);
  </code></pre>