Error: Node type 11 comparison is not implemented (Web components)

[aendra-rininsland]

Hi there! I'm working on a Polymer app that could really benefit from html-injector (since literally everything in Polymer is effectively HTML), but whenever I make a change, I get the following:

Error: Node type 11 comparison is not implemented

...Thrown by dom-compare-temp.

According to https://developer.mozilla.org/en/docs/Web/API/Node/nodeType, "type 11" is a document fragment, which I'm guessing is related to Polymer and web components.

Any chance this could be improved, possibly by using a different comparison dependency? It would be so nice to be able to inject code instead of refreshing the entire page...

[ghost]

I'm using Vue.js, and I'm getting the exact same error when making a change in my html.

Here's the full trace:

..\node_modules\dom-compare-temp\lib\compare.js:126

           throw Error("Node type " + left.nodeType + " comparison is not implemented");
           ^
Error: Node type 11 comparison is not implemented
    at Error (native)
    at Comparator.compareNode (C:\..\node_modules\dom-
compare-temp\lib\compare.js:126:22)
    at Comparator._compareNodeList (C:\..\node_modules
\dom-compare-temp\lib\compare.js:36:23)
    at Comparator.compareNode (C:\..\node_modules\dom-
compare-temp\lib\compare.js:109:27)
    at Comparator._compareNodeList (C:\..\node_modules
\dom-compare-temp\lib\compare.js:36:23)
    at Comparator.compareNode (C:\..\node_modules\dom-
compare-temp\lib\compare.js:109:27)

[jfcieslak]

apparently this error is triggered by a keyword "template" which is used both inside polymer components and vue

[jfcieslak]

OK, so it's a bug in dom-compare-temp module which is used by htmlinjector. Here is the the failing function:

Comparator.prototype.compareNode = function(left, right) {
      var vLeft, vRight, r;
      if (left.nodeName === right.nodeName && left.nodeType == right.nodeType) {
         switch (left.nodeType) {
            case type.DOCUMENT_NODE:
               return this.compareNode(left.documentElement, right.documentElement);
            case type.ELEMENT_NODE:
               return this._compareAttributes(left.attributes, right.attributes) &&
                     this._compareNodeList(left.childNodes, right.childNodes);            
            case type.TEXT_NODE:
               // fallthrough
            case type.CDATA_SECTION_NODE:
               // fallthrough
            case type.COMMENT_NODE:
               if (left.nodeType == type.COMMENT_NODE && !this._options.compareComments)
                  return true;
               vLeft = "" + left.nodeValue;
               vRight = "" + right.nodeValue;
               if (this._options.stripSpaces && left.nodeType !== type.CDATA_SECTION_NODE) {
                  vLeft = vLeft.trim();
                  vRight = vRight.trim();
               }
               r = vLeft === vRight;
               return !r ? this._collector.collectFailure(left, right) : r;
            default:
               throw Error("Node type " + left.nodeType + " comparison is not implemented");
         }
      } else
         return this._collector.collectFailure(left, right);
   };

To fix this, a case for type.DOCUMENT_FRAGMENT_NODE should be added inside the switch block:

            case type.DOCUMENT_FRAGMENT_NODE:
            // can fall through I guess...

This will work as expected.

[ChrissiQ]

This issue is now fixed in Olegas/dom-compare. Could it be pulled back into the dom-compare-temp fork used in this project?

[divanvisagie]

Would be really nice if this issue could be resolved.

[eaCe]

i ended up using https://github.com/ds300/patch-package to patch this issue...