Geek Answers Handbook

Cannot use polymer element - "Failed to execute" registerElement "in" Document ""

I created an element that I will simplify here for brevity, and would like to do an end-to-end process and see if it works.

This is the 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 loaded it into my test repo and opened a new project in WebStorm.

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

Now my index file that is loading 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:

Unprepared SyntaxError: Failed to execute 'registerElement' on "Document": registration error for type "undefined". Type name is not valid.

I have tried many posts and I don’t see what I am missing here. I load webcomponents.js before importing the HTML element file.

So, 2 questions:

  • Why does this error occur and what am I doing wrong? polymer.js I missing polymer.js ? If so, why is it not loading as part of the dependency?
  • If I have many elements, do I need to include polymer.html in each of them, or can I just upload it once to the index.html file?
+5
source share
1 answer
  • You mix polymer 0.5 with 0.9. In Polymer 0.9, a lot has changed. For example, the polymer element has been replaced by a 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>
  1. You see this error

Unprepared SyntaxError: Failed to execute 'registerElement' on "Document": registration error for type "undefined". Type name is not valid.

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

Note: the main elements are disposed of in 0.9 polymer and replaced with iron elements.

  1. To install Polymer 0.9 correctly, include these lines in your bower.json

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

and use this terminal command $ bower install

+9
source

More articles:


All Articles