Can't Use Polymer Element - "Failed to execute 'registerElement' on 'Document'"

Question

I created an element which which I'll simplify here for brevity, and I wanted to do an end-to-end process and see if it works.

This is its bower.json file:

{
  "name": "test-element",
  "version": "0.0.1",
  "authors": [
    "my name"
  ],
  "description": "A description",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "~0.9.0"
  }
}

I uploaded it to my test repo, and opened a new project in WebStorm.

I did bower install test-element and it also downloaded the polymer directory which is the dependency, as I wanted, though there are no js files there. (Shouldn't there be a polymer.js file to reference?)

Now, my index file that loads has this in the body:

    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/test-element/test-element.html">

    <test-element
        elements="[...array contents...]">
    </test-element>

And my test-element.html:

<link rel="import" href="../../../polymer/polymer.html">


<polymer-element name="test-element" ....> 
    <template>
          ... doesn't really matter ...
    </template>
    <script>
        Polymer({
            created: function () { .. }
        });
    </script>
</polymer-element>

But when I load the page I see this in the console:

Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid.

I tried many posts, and I can't see what I'm missing here. I'm loading the webcomponents.js before importing the element's HTML file.

So 2 questions:

1. Why does this error occur and what did I do wrong? Am I missing the polymer.js ? If so, why didn't it download as part of the dependency ?
2. If I have many elements, do I need to include the polymer.html in each of them or can I just load it once in the index.html file?

Answer 1

1. You are mixing polymer 0.5 with 0.9. A lot has changed in Polymer 0.9. Eg., polymer-element has been replaced with dom-module. Migration Guide.

Before:

<polymer-element name="register-me">
  <template>
    <div>Hello from my local DOM</div>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

After:

<dom-module id="register-me">
  <template>
    <div>Hello from my local DOM</div>
  </template>
</dom-module>

<script>
  Polymer({is: "register-me"});
</script>

2. You are seeing this error

Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid.

because you are using polymer core elements that are compatible with Polymer 0.5 with Polymer 0.9. Along with polymer 0.9 the polymer elements are also upgraded. Follow this post to install the new elements.

Note: The core-elements are scrapped in polymer 0.9 and replaced with iron elements.

3. To properly install Polymer 0.9 include these lines in your bower.json

   "dependencies": { "polymer": "Polymer/polymer#^0.9.0" }

and use this terminal command $ bower install