I just added the new Polymerfire <firebase-app>
element to my (Polymer 1.x + Firebase 3.x) project and it crashed the project. I expected to see the home screen load on localhost but, instead, I just get a blank screen and console error.
<firebase-app auth-domain="my-app-id.firebaseapp.com"
database-url="https://my-app-id.firebaseio.com/"
api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
</firebase-app>
The console log reports the following error:
Console.logfirebase-app.html:94
Uncaught ReferenceError: firebase is not defined
The relevant line of code (line #94) is the following:
firebase-app.html, line 94firebase.initializeApp.apply(firebase, init); // Line 94, highlighted error
The entire source code for the firebase-app element is located here.
https://github.com/firebase/polymerfire/blob/master/firebase-app.html<!--
@license
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file or at
https://github.com/firebase/polymerfire/blob/master/LICENSE
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="firebase.html">
<dom-module id="firebase-app">
<script>
(function() {
'use strict';
/**
* The firebase-app element is used for initializing and configuring your
* connection to firebase.
*/
Polymer({
is: 'firebase-app',
properties: {
/**
* The name of your app. Optional.
*
* You can use this with the `appName` property of other Polymerfire elements
* in order to use multiple firebase configurations on a page at once.
* In that case the name is used as a key to lookup the configuration.
*/
name: {
type: String,
value: ''
},
/**
* Your API key.
*
* Get this from the Auth > Web Setup panel of the new
* Firebase Console at https://console.firebase.google.com
*
* It looks like this: 'AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g'
*/
apiKey: {
type: String
},
/**
* The domain name to authenticate with.
*
* The same as your Firebase Hosting subdomain or custom domain.
* Available on the Firebase Console.
*
* For example: 'polymerfire-test.firebaseapp.com'
*/
authDomain: {
type: String
},
/**
* The URL of your Firebase Realtime Database. You can find this
* URL in the Database panel of the Firebase Console.
* Available on the Firebase Console.
*
* For example: 'https://polymerfire-test.firebaseio.com/'
*/
databaseUrl: {
type: String
},
/**
* The Firebase app object constructed from the other fields of
* this element.
*/
app: {
type: Object,
notify: true,
computed: '__computeApp(name, apiKey, authDomain, databaseUrl)'
}
},
__computeApp: function(name, apiKey, authDomain, databaseUrl) {
if (apiKey && authDomain && databaseUrl) {
var init = [{
apiKey: apiKey,
authDomain: authDomain,
databaseURL: databaseUrl
}];
if (name) {
init.push(name);
}
firebase.initializeApp.apply(firebase, init);
} else {
return null;
}
return firebase.app(name);
}
});
})();
</script>
</dom-module>
Summary from comments: @Bogdan.Nourescu was correct. I did not have the firebase-sdk directory correctly installed.
I had to install the Polymerfire dependencies using Bower using the following command:
bower install --save firebase/polymerfire
Note: bower install --save polymerfire
points to DivShot's version which is now outdated.