react: "Missing React element for debugID" warning when triggering a render in componentWillMount
Do you want to request a feature or report a bug? Bug
What is the current behavior?
As reported by @adamryvola in https://github.com/facebook/react/pull/6869#issuecomment-230349514, React is displaying a warning Warning: ReactComponentTreeDevtool: Missing React element for debugID 2 when building stack when another component is rendered in componentWillMount
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
const container = document.getElementById('container');
const menuContainer = document.getElementById('menu-container');
export default class App extends Component {
componentWillMount() {
ReactDOM.render(<div />, menuContainer); // <= Trigger the warning
}
render() {
return (
<div>
<div>App</div>
</div>
);
}
}
ReactDOM.render(<App />, container);
JSFiddle: https://jsfiddle.net/0n3a6vp9/
What is the expected behavior? According to @gaearon this warning is “against internal bugs in React, it’s not meant for users” (source: https://github.com/facebook/react/pull/6869#issuecomment-230272365) so this warning should not be triggered.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 15.2.0, no issue with React 0.14.7
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 7
- Comments: 18 (1 by maintainers)
Commits related to this issue
- Pass shouldHaveDebugID flag to instantiateComponent (#7193) * Add failing tests for #7187 and #7190 * Pass shouldHaveDebugID flag to instantiateComponent This allows us to remove a hack that wa... — committed to facebook/react by gaearon 8 years ago
- Pass shouldHaveDebugID flag to instantiateComponent (#7193) * Add failing tests for #7187 and #7190 * Pass shouldHaveDebugID flag to instantiateComponent This allows us to remove a hack that was ad... — committed to facebook/react by gaearon 8 years ago
- Pass shouldHaveDebugID flag to instantiateComponent (#7193) * Add failing tests for #7187 and #7190 * Pass shouldHaveDebugID flag to instantiateComponent This allows us to remove a hack that wa... — committed to usmanajmal/react by gaearon 8 years ago
@gaearon Please have a look at my simple boilerplate - https://github.com/xuqingkuang/react-redux-boilerplate
When execute
gulp testthe warning will appear.Hey,
I’m still getting this warning (specifically
Warning: ReactComponentTreeDevtool: Missing React element for debugID X when building stack) when running tests with Jest.Okay, #7193 should fix it.
This is a bug in React and it should be fixed in master. Please wait for the next release. If it’s not fixed for you in the next release, please file another issue.
Interestingly, also appears triggered by
ReactDOMServerusage insiderender: https://github.com/facebook/react/issues/7190