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

I’m trying to display a dropdown menu composed of ul, li and a (similar to the one from bootstrap). A PluginList element is used to generate a dropdown menu from a store.

But the browser is not correctly parsing/outputting the HTML. Everytime I click on an item, I got the error: Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the samedata-reactid: .0.0.0.0.7.1.$=15:0.0.

This bug is probably related to #1400, but I can’t find any solution 😓

I’using react 0.13.3 and I also tested with the latest master.

HTML DOM View:

View of the same tree in the React plugin for Chrome:

Screenshot of the result

The blue element has nothing to do here

[zpao]

Looking at the HTML view, the data-reactid in question is used on 2 <a> tags. Usually this is the result of the browser reorganizing nodes, specifically nested <a>s.

<a id="1">
  <a id="2">foo</a>
</a>

Will always get moved in the DOM to be

<a id="1"></a>
<a id="2">foo</a>

That’s the likely culprit for your case. Chances are you have nested anchors across components. DropdownItem definitely has one. If anything rendered inside there has an anchor (I guess PluginsList or one of its children), then this will happen. When it does happen, React’s idea of the DOM and the real DOM get out of sync, and then you hit this problem.

Though your problem might actually be manifesting slightly differently (could be the DOM structure playing different tricks) but you definitely have nested anchors.

[jimfb]

Oh, right, because the dom will rewrite the anchors. You’re right.