Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`

[dlindahl]

TL;DR fix Load `polymer.js first

---

Probably related to #1107

When a select or input[type="checkbox"] is rendered inside an unwrapped Polymer element's child node, the following error is thrown:

Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`

I would imagine that radio buttons, etc. would also throw.

I am not sure if this is an actual bug or a limitation of React and the ShadowDOM/Polymer. But the error message is... not exactly helpful in determining what to do.

I wrote a simple JSBin that demonstrates the problem: http://jsbin.com/pinijoho/2

[dlindahl]

After some additional toying with Polymer + React, I ran into the same bug with a more straightforward example: http://jsbin.com/xoxip/2/

In this JSBin, the React component simply toggles a CSS class when the state changes due to a mouse click.

The CSS class is added properly on the first click, but when toggled off, removing the CSS class throws the same Two valid but unequal error.

[benjamn]

There's definitely something weird going on here. The error message is as accurate as it can be, though it's generally difficult to guess (at the framework level) what the root source of the problem was.

When we've seen errors like this in the past, it was typically because .cloneNode() was being used by client code to make copies of React-generated nodes, also copying the data-reactid attribute (which is supposed to be unique), but my brief investigation doesn't point there this time.

[zpao]

I actually get a different error in Firefox as it's trying to get the node for an event. Can repro in Chrome though.

TypeError: Argument 1 of Node.contains does not implement interface Node.
Stack trace:
containsNode@http://fb.me/react-0.9.0.js:14157:5
...

[dlindahl]

Let me rephrase, I am sure that the error is as explicit as it can be. But for someone that is not intimately familiar with what React is trying to do, its like running into a brick wall. 😄

But that is besides the point, the issue isn't with the error messaging.

It sounds like this may be an issue with Polymer's ShadowDOM polyfill. I tried playing with it a bit more and I believe I was able to get it to work by not unwrap-ing the Light DOM node that the React component is rendered into:

http://jsbin.com/xoxip/3/

It sounds like Polymer's wrap function wraps the DOM Api with its own methods for interacting with the Shadow- and LightDOM. Since React is using appendChild somewhere, and I was unwrap-ing the root element, it sounds like Polymer and React disagreed about what the tree should look like. Removing the explicit unwrap exposes Polymer's version of appendChild to React and then it starts playing nicely again.

The curious thing is why I felt it necessary to add the unwrap in the first place... I am pretty sure that React was complaining about the Light DOM node not being of the right NODE_TYPE, but I made a couple changes to my rendering loop in the meantime which may have eliminated that issue...

Thank you to both of you for looking into this. Since the JSBin seems to be working now as well as my application, I am going to go ahead and close this and hope that we've all learned something new.

[benjamn]

That story is consistent with my findings: the invariant in ReactMount.getID was failing because cached !== node, where cached was a <span> and node was something like { impl: cached, ...}, so it sounds like the node was one of the ShadowDOM wrappers you're talking about.

[arv]

When using polymer's shadow dom polyfill you should never see any raw DOM nodes. If you do it is either a bug or one of the known limitations. It would be useful to know how you got a reference to your node?

[benjamn]

@arv React creates most of its nodes by setting .innerHTML, so unless Polymer is hooking that setter, that might be one way raw DOM nodes get exposed?

[arv]

We do wrap innerHTML. Accessors and the buggy implementation of them in WebKit and Blink is the reason why we need to wrap everything.

Known limitations are the accessors of

[arv]

...of window and document since these are non configurable in webkit.

[dlindahl]

@arv I was indeed getting wrapped nodes, but I ran into an issue when rendering a React component inside one of them. My solution at the time was to unwrap the polyfilled node reference and use that with React. That seemed to fix the problem initially, but then I ran into this issue.

Turns out that passing the unwrapped node to React was a bad idea and it works fine without doing that. I think the root cause of my initial issue was due to a misuse of the React rendering API. I believe I was calling renderComponent for each upstream update instead of using setProps.

So all in all, everything actually works just fine 😄

Now if I can only figure out if its possible to use React to render Polymer elements...

[arv]

That should be easy. Polymer elements are just custom elements so createElement, innerHTML etc should just work.