Skip to first unread message
charle...@gmail.com
Aug 9, 2014, 1:28:13 AM8/9/14
to polym...@googlegroups.com
Hello! My name is Charles Kronk. I just recently ran into a problem when moving my polymer project outside of dart.
Originally my folder was a dart folder, was running inside of dart editor, etc., completely fine, but when moved outside of dart (deleting all of the dart files, replacing the dependencies, using a .json file and bower instead of .yaml and pub), I ran into an error, specifically:
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. I did a decent amount of searching online and found a similar issue here: http://stackoverflow.com/questions/25190771/uncaught-hierarchyrequesterror and https://github.com/Polymer/polymer/issues/688
More specifically, the error directs us to TemplateBinding.js:163 (var html = d.appendChild(d.createElement('html'));).
However, as suggested in the threads linked above, it doesn't appear as though 'platform.js' has been loaded twice at all.
Here is what the <head> of our 'index.html' looks like, for example:
<head>
<script src="bower_components/platform/platform.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="import" href="polymer_elements/search_bar.html">
<link rel="import" href="polymer_elements/header_panel_main.html">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
Our polymer elements are set up with many elements in one html file, however this caused no problems in dart editor and we don't think it is the root of the problem, they are arranged as follows:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/paper-button/index.html">
<link rel="import" href="../bower_components/paper-fab/index.html">
<link rel="import" href="../bower_components/core-icons/index.html">
<link rel="import" href="../bower_components/core-icon-button/index.html">
<link rel="import" href="../bower_components/core-iconset/index.html">
<link rel="import" href="../bower_components/core-iconset-svg/index.html">
<link rel="import" href="../bower_components/core-icons/communication-icons.html">
<polymer-element name="downvote-button">
<template>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
core-icon-button[icon="thumb-down"]:hover {
fill:red;
}
</style>
<core-icon-button icon="thumb-down" on-click={{decrement}}></core-icon-button>
</template>
<script>
Polymer('downvote-button', {
decrement: null,
ready: function() {
}
});
</script>
</polymer-element>
<polymer-element name="upvote-button">
<template>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
core-icon-button[icon="thumb-up"]:hover {
fill:green;
}
</style>
<core-icon-button icon="thumb-up" on-click={{increment}}></core-icon-button>
</template>
<script>
Polymer('upvote-button', {
increment: null,
ready: function() {
}
});
</script>
</polymer-element>
etc.
And finally, here is our bower.json file:
{
"name": "example",
"version": "0.0.0",
"description": "N/A",
"main": "index.html",
"authors": [
"Benjamin Kissinger",
"Charles Kronk"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#~0.3.5",
"core-elements": "Polymer/core-elements#~0.3.5",
"paper-elements": "Polymer/paper-elements#~0.3.5",
"jquery": "~2.1.1",
"bootstrap": "~3.2.0",
"core-ajax": "Polymer/core-ajax#~0.3.5",
"platform": "Polymer/platform#~0.3.5"
}
}
Please let me know if more information is needed. I'm at my wits end and would very much appreciate any help! Thanks so much!
Reply all
Reply to author
Forward
0 new messages