ReferenceError: Polymer is not defined - polymer

Question

When i start gulp serve am facing following error
ReferenceError: Polymer is not defined
http://localhost:5000/elements/my-greeting/my-greeting.html:30
ReferenceError: Polymer is not defined
http://localhost:5000/elements/my-list/my-list.html:30
Here is code of my-greeting.
<script>
(function() {
'use strict';
Polymer({
is: 'my-greeting',
properties: {
greeting: {
type: String,
value: 'Welcome!',
notify: true
}
}
});
})();
</script>

Answer 1

You must include the reference to polymer in your list.html file:
<link rel="import" href="../bower_components/polymer/polymer.html">
Are you sure it was included?

Answer 2

Although I am serving through IIS, I was having the same kind of issues as you.
Error: Polymer is not defined
<unknown> at /GooglePolymer/starterKit/app/elements/my-greeting/my-greeting.html:30
<unknown> at /GooglePolymer/starterKit/app/elements/my-greeting/my-greeting.html:41
Chrome DevTools was throwing a 404, telling me It could not find the bower component polymer.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/GooglePolymer/starterKit/app/bower_components/polymer/polymer.html
For some reason I can not explain the link references in the files are not functioning correctly and not linking up enough levels to the bower_components. Hence not finding file.
Solution: I copied the bower_components folder into app and boom it worked. I hope this helps with your problem.

Answer 3

Import polymer.html in your custom element files.

Answer 4

Locate the .bowerrc file and be sure that the entry is pointing to the directory scaffold location where the bower components are residing.
Even if your code "links" to the exact location of the project bower components, the .bowerrc file overrides the directive [most importantly for Polymer]. In my case, the bowerrc file was claiming the bower components were located in the public [application, NOT project] directory.
A number of the Polymer examples offset the bower components by a sub-directory or two so that adding a bower component using npm results in a mismatch that can manifest itself as dual [dueling] bower component sources. For example, running a bower request such as npm install --save whatever always installs to the project directory regardless that the .bowerrc file points to the public directory.
Having said all that, placing the bower components in both the project directory, say firebaseTest, AND the application directory, say public [firebaseTest->public] fixed multiple bower component issues. And these were "Whack-a-Mole" type bugs in which one fix would cause a fix breaking other bug.
I was having "[paper-listbox::_flattenBehaviorsList]: behavior is null, check for missing or 404 import" issues that messed up a dropdown component.
It appears that the material components themselves have internal dependency reference issues meaning that some subset of material components need to be in the project directory and others in the application directory. I just dropped identical bower-component directories in both places for the short term.