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

Most upvoted comments

@gaearon Please have a look at my simple boilerplate - https://github.com/xuqingkuang/react-redux-boilerplate

When execute gulp test the 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 ReactDOMServer usage inside render: https://github.com/facebook/react/issues/7190