6

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?
Omri Aharon
  • 16,959
  • 5
  • 40
  • 58

1 Answers1

9
  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>
  1. 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.

  1. 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

Community
  • 1
  • 1
Akh
  • 5,961
  • 14
  • 53
  • 82
  • Thanks, I'll try to implement this over the weekend see if it works. What about the polymer.html loads ? Are they a must-per element or is once enough ? – Omri Aharon May 21 '15 at 21:14
  • 1
    Its recommended to add as the first import in your custom elements. But its good to have because sometimes browsers may complain saying you are using polymer without importing polymer. – Akh May 21 '15 at 21:34
  • Hey, @AKh, I got almost the same error after `crisping` my app, but in my case `Registration failed for type 'dom-module'. A type with that name is already registered`. can you please advise me anything? – Vlas Bashynskyi Jun 12 '15 at 19:05
  • Did you vulcanize and then crisper? – Akh Jun 12 '15 at 22:29