Skip to content

Yet Another Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid #4511

@dmin

Description

@dmin

I'm experiencing an unexpected error related to "native" DOM events created in an "owner" component and triggered by DOM elements rendered by "owned" components. There's been a number of seemingly related issues, the closest being #3790 - but this might be a different edge case so I thought I'd create a new issue for it.

Reproduction

I've tried to whittle this down as much as possible:
(The JSFiddle is using 0.13.3, but I get the same error using 0.14.0-beta1)
https://jsfiddle.net/dmininger/8rdqhnox/

Steps

  1. Click "Go to Two"
  2. Click "Go to One"
  3. Click "Go to Two"

The second time component Two is rendered React throws Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid``

Notes

As I was trying to narrow down the cause, I found that under the following scenarios no error will be thrown:

  1. An onClick prop with an empty function (onClick: function(){}) is added to the "a" element in component One. See https://jsfiddle.net/dmininger/kx98qfd2/
  2. The "input" element in component Two is removed (leaving the "form" element). See https://jsfiddle.net/dmininger/snjb8ysq/
  3. The return value of the render methods of components One and Two are inlined in the render method of the Main component (i.e. everything is rendered by a single component). See https://jsfiddle.net/dmininger/3majxxL0/
  4. ONLY WHEN USING 0.14.0-beta1: The "form" element in component Two is removed (leaving the "input" element). (Sorry, no fiddle, is 0.14.0-beta1 on a CDN?) This still throws in 0.13.3.

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions