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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions