firebasepolymerpolymer-1.0firebase-polymer

Polymer 1.x + Firebase == Hello world?


I want to make Hello, world with the Polymer firebase-collection element.

I expect to see one or more repetitions of Hello, world and no errors in the console. Instead, I see no Hello, world and many console errors beginning with:

console.log
ReferenceError: Firebase is not defined

To recreate the problem, follow these steps:

  1. Open this jsBin.
  2. ❌ Observe no Hello, world and errors in the console.

Notice the <firebase-collection> code is simply a copy/paste from the official documentation located here.

http://jsbin.com/guzimubuma/edit?html,console,output
<!doctype html>
<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  <!---- >
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <!---->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="firebase-element/firebase-collection.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

  <p>
    <paper-button on-tap="_handleClick">Click Me</paper-button>
  </p>
  <!---->
    <firebase-collection
      location="https://dinosaur-facts.firebaseio.com/dinosaurs"
      data="{{dinosaurs}}"></firebase-collection>
    <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
      Hello, world
    </template>
  <!---->
  Hello, world

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      _handleClick: function() {
        console.log('You clicked me!');
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Solution

  • Summary from comments.

    This problem was created by a server issue (at polygit2.appspot.com) that is now resolved.