Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changing node type breaks invariant #1107

Closed
vsolovyov opened this issue Feb 17, 2014 · 12 comments
Closed

Changing node type breaks invariant #1107

vsolovyov opened this issue Feb 17, 2014 · 12 comments

Comments

@vsolovyov
Copy link

This example:

<html>
  <head>
    <script type="text/javascript" src="http://fb.me/react-0.9.0-rc1.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript">
var FailingComponent = React.createClass({
    getInitialState: function() {
        return {selecting: false}
    },
    handleAddClick: function(e) {
        this.setState({selecting: true});
    },
    render: function() {
        if (this.state.selecting) {
            // This will cause Invariant violation
            return React.DOM.input(null, '')
        } else {
            return React.DOM.div({onClick: this.handleAddClick}, "Press me");
        }
    }
});

React.renderComponent(FailingComponent(), document.getElementById('example'))
    </script>
  </body>
</html>

When one tries to click on a div an error will be raised:

Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0

Does break with select/option pair instead of input tag as well (maybe some other tags as well, haven't checked them). Doesn't break with button tag and others.

Works flawlessly on React 0.8.0, doesn't work on master.
@syranide
Copy link
Contributor

Can just chime in and say that's something is definitely funky here. Also, it breaks even if wrapped in one or more divs, so it's not specific to the root (although the bad reactid will never go "higher" than .0.0 for me at least).

@syranide
Copy link
Contributor

cc @zpao This seems (to me) like a showstopper for 0.9.0.

@plievone
Copy link
Contributor

Is this exactly the same as #1105?

@syranide
Copy link
Contributor

@plievone It seems so, but it's weird, I did try it with span and div and it worked. Oh well, but yeah, probably same root cause.

@plievone
Copy link
Contributor

@syranide Without keys it may reuse the same instance or id or something in some cases, so not unmounting the event target and thus not erroring, I guess?

@syranide
Copy link
Contributor

@plievone I think I tried that, but span != div so I think it should anyway. But this whole issue seems magically weird.

@vsolovyov
Copy link
Author

@syranide Problem occurs for me with reactid=.0.0.3.0:0.3.1 as well

@petehunt
Copy link
Contributor

Yeah. Definitely a launch blocker.

@sophiebits
Copy link
Collaborator

Dupe of #1105. It breaks only with input because ReactMount's node cache doesn't get populated if you just render a span without ever calling getDOMNode().

@dlindahl
Copy link

I am still seeing this error even on 0.9 with select and checkbox inputs. The catch is that the component is rendered inside an unwrapped Polymer element (unwrap(el))

I am not sure if this is a bug with React or not, but it is entirely unclear to me how to resolve the problem.

Can anyone help nudge me in the right direction?

@sophiebits
Copy link
Collaborator

@dlindahl Can you post a minimal jsbin or jsfiddle showing the problem in a new issue?

@dlindahl dlindahl mentioned this issue Mar 17, 2014
Closed
@dlindahl
Copy link

@spicyj Done: #1263

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@sophiebits @dlindahl @plievone @petehunt @vsolovyov @syranide