Yeoman, vulcanized.html, HierarchyRequestError

232 views
Skip to first unread message

cape...@gmail.com

unread,
Mar 13, 2015, 3:15:04 AM3/13/15
to polym...@googlegroups.com
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

When using gulp to build the distribution version of a polymer project using yeoman the vulcanized element html produces a string of errors including the one above.
Any ideas on how i can prevent this error?
Currently I just use the elements.html file but that is not ideal.

AJ Ortega

unread,
Mar 13, 2015, 3:27:43 AM3/13/15
to cape...@gmail.com, polym...@googlegroups.com
Have you applied http://support.microsoft.com/en-us/kb/3032359? In my testing I wasn't able to replicate the error after that patch.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5fbe3095-1ae8-41fe-b5f3-d0ce2f8f0e42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
AJ Ortega | Software Engineer | a...@google.com | 626-872-5064 

cape...@gmail.com

unread,
Mar 13, 2015, 4:48:24 AM3/13/15
to polym...@googlegroups.com, cape...@gmail.com
Thank you for your reply.
I am running a IMac Retina 5k so not sure that will help.
I attached the file in question, perhaps that can help.

Thank you for your effort on this matter.
elements.vulcanized.html

Jelte Liebrand

unread,
Mar 13, 2015, 12:31:13 PM3/13/15
to cape...@gmail.com, polym...@googlegroups.com
I've seen that error if you pull in polymer.js separately yourself. Which you shouldn't need to do since polymer.html does that for you.

Not the most helpful error message, but the that *might* be what you are seeing(?)
Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

Johan Rabie

unread,
Mar 13, 2015, 6:10:03 PM3/13/15
to polym...@googlegroups.com, cape...@gmail.com
Thanks Jelte.
I had a look through all the custom elements that I created and it seems that Yeoman generator adds
<link rel="import" href="../../../bower_components/polymer/polymer.html">
to each element.

I deleted that line from each element that was generated and now it works fine.
Jelte for president!

Jelte Liebrand

unread,
Mar 13, 2015, 6:20:38 PM3/13/15
to Johan Rabie, polym...@googlegroups.com
hmm that should not have caused the problem... each element can and should import the polymer.html... but you probably should remove wherever you are adding polymer.js as a script tag

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

Johan Rabie

unread,
Mar 13, 2015, 6:33:42 PM3/13/15
to polym...@googlegroups.com, cape...@gmail.com
I don't know, still learning as I am going on.
I know the polymer.html file imports the polymer.js in a script tag, how the system deals with it in the backend I have no clue.
But for what ever reason, cleaning that up from the custom components seemed to do the trick.
It's a bit concerning, but I am sure there is something obvious that I might be missing.
For now though, alls well that ends well and I thank you for your effort and dedication.

Arthur Evans

unread,
Mar 16, 2015, 6:29:32 PM3/16/15
to Johan Rabie, polymer-dev
Hi Johan,

HTML imports are automatically de-duplicated based on URL. So if 20 components load Polymer this way:

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

And assuming all the imports resolve to the same URL, say:


Then the polymer.html file is only loaded once and polymer.js is only executed once. That's why we typically have an import for polymer.html at the beginning of each custom element file. 

(It's also why we use a flat dependency structure, so anything in /components/ can reference another component using ../component-name/... this ensures that both core-menu and paper-button use the same path for polymer.html, for example.)

Script tags don't de-dup, which is why the we recommend loading the webcomponents polyfill from your main page before importing any custom elements.

If you load polymer.js using a script tag, you generally won't be able to use other people's custom elements out of the box. 

Hope this helps,
Arthur


Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

Rob Dodson

unread,
Mar 17, 2015, 3:14:38 PM3/17/15
to Arthur Evans, Johan Rabie, polymer-dev
Hi Johan,

This problem often occurs if you include imports in your index.html. The elements.html file will get vulcanized into elements.vulcanized.html, but you may have other imports in your index file which are not being vulcanized. Can you check to see if all of your imports are in elements.html?

Reply all
Reply to author
Forward
0 new messages