Project from scratch with yeoman and polymer uses polymer.js instead of webcomponents (polymer 0.5.1)

263 views
Skip to first unread message

ignacio...@gmail.com

unread,
Nov 14, 2014, 8:44:21 AM11/14/14
to polym...@googlegroups.com
Hi,

I create a new project from scratch and the lastes dependences are used (0.5.x) but the project uses polymer.js instead of webcomponents. So it does not work.

When I start the website I got the following errors in the console

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. polymer.js:6359
Uncaught TypeError: object is not a function elements.vulcanized.html:317
Uncaught TypeError: object is not a function elements.vulcanized.html:348
2Uncaught TypeError: Cannot read property 'parse' of undefined platform.js:16

It is the default project without any change.  I think the yeoman polymer is not updated in order to work with 0.5.x because it is using polymer.js instead of webcomponents.js . I changed by hand and it works. I it just that.

Best
Ignacio

Eric Bidelman

unread,
Nov 16, 2014, 4:42:43 PM11/16/14
to Ignacio Manzano, Rob Dodson, polymer-dev
+rob

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/af04f297-fc30-40a3-9b27-be9d8f5d25a1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

ignacio...@gmail.com

unread,
Nov 16, 2014, 8:06:38 PM11/16/14
to polym...@googlegroups.com, ignacio...@gmail.com, lets.em...@gmail.com
I will add a new rare behaviour.

I did the following.

yo polymer

(I select core and paper elements only)

Then I open the index.html file and I add the paper button as follow

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Polymer WebApp</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <script src="bower_components/platform/platform.js"></script>
  <!-- build:vulcanized elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endbuild-->
  <link rel="import" href="bower_components/paper-button/paper-button.html">
</head>

<body unresolved>

  <div class="hero-unit">
    <yo-greeting></yo-greeting>
    <p>You now have</p>
    <yo-list></yo-list>
  </div>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>



Then I execute 
grunt
cd dist

python -m SimpleHTTPServer


When I go to the browser I got

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. polymer.concat.js:6313
Uncaught TypeError: object is not a function core-meta.html:68
Uncaught TypeError: object is not a function core-iconset.html:67
Uncaught TypeError: object is not a function core-icon.html:70
Uncaught TypeError: object is not a function paper-ripple.html:274
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-shadow.html:65
Uncaught TypeError: object is not a function paper-focusable.html:36
Uncaught TypeError: object is not a function paper-button-base.html:26
Uncaught TypeError: object is not a function paper-button.html:122

If I remove the paper-button import it works without problem.

Any idea??

Rob Dodson

unread,
Dec 7, 2014, 6:27:18 PM12/7/14
to Ignacio Manzano, polymer-dev, Rob Dodson
I guess this is from polymer.js being included twice. The fix is to add any elements you want to use in your app to `elements.html` (this will also ensure that those elements are vulcanized with the rest of the site content).

I'll try to think about a better way to handle this scenario so other's don't fall into the same situation

Ignacio Manzano

unread,
Dec 7, 2014, 6:37:20 PM12/7/14
to Rob Dodson, polymer-dev, Rob Dodson

Yes sure,we are using 0.4.2 so I when I extract the component to put in a separated repo I told the chance to move it to 0.5.1, so something from 0.4.2 can be there :)

We are using just one element.html were we  declared all the components used as you mention. In 0.4.2 we have some issue with paths when vulcanized is running,it seems that is not able to resolve relative paths,so we have to take care of put the same path in all the includes

Best
Ignacio

jmc...@gmail.com

unread,
May 5, 2015, 11:20:54 PM5/5/15
to polym...@googlegroups.com, ignacio...@gmail.com, lets.em...@gmail.com

Hey Rob, any update on this?

I run into this issue when I have one 'library' of elements in a repo 
and it has a dist/vulcanized.html file.

Then I include that repo in my app via bower and import the dist/vulcanized.html

After that, I need to add other elements that my app needs in addition.

Is there a best practice for this yet in 0.5 and/or 0.8?

Thanks,

- Joe
Reply all
Reply to author
Forward
0 new messages