React: "Missing React element for debugID" warning when triggering a render in componentWillMount

[yannickcr]

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

[gaearon]

Interestingly, also appears triggered by ReactDOMServer usage inside render: https://github.com/facebook/react/issues/7190

[gaearon]

Okay, #7193 should fix it.

[gaearon]

Fixed by #7193.

[adamryvola]

Hello,
i created small project. It gives me this warring. Here is link: small-kit

Please, can you try it, and tell me, where is the problem? I cant find it.

I am very thankful for all your help!

[gaearon]

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.

[angusfretwell]

Hey,

I'm still getting this warning (specifically Warning: ReactComponentTreeDevtool: Missing React element for debugID X when building stack) when running tests with Jest.

[gaearon]

File an issue with the code reproducing it. Thank you!

[angusfretwell]

@gaearon Here you go: #7240 😸

[kevinSuttle]

npm install --save [email protected] - fixes this issue for me.

[maullerz]

for me "15.3.0-rc.3" and "15.3.0" not fixes issue

[gaearon]

for me "15.3.0-rc.3" and "15.3.0" not fixes issue

@maullerz This issue is about Jest. Are you using Jest? Can you provide a sample project demonstrating the issue?

[maullerz]

@gaearon no, i dont use Jest.
If it helps, i see this errors only in my bash console, when i run koa with server-side rendering, and using Jade as template.

[xuqingkuang]

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

When execute gulp test the warning will appear.

[gaearon]

Thanks for a repro case.
I’ll reopen and get back to it after fixing some other issues I’m working on right now.

[AshCoolman]

Hack: filter test output

Installation

Save the following file in the root of your project

./test-run-filter.js

var spawn = require('child_process').spawn;
console.log('Run like this: node ./test-run-filter.js  "npm test"');
var ls = spawn(process.argv[2], {shell:true});
ls.stdout.on('data', (data) => {
  if (data.indexOf('Missing React element for debugID') === -1) {
    console.log(data);  
  }
});

ls.stderr.on('error', (data) => {
  console.log(data);
});

ls.on('close', (code) => {
  console.log(code);
});

Usage

$ node ./test-run-filter.js "npm run test"

Conclusion

◔ᴗ◔

[gaearon]

This was fixed in React 15.3.1.
Confirmed by following instructions in https://github.com/facebook/react/issues/7187#issuecomment-239327225.

[Raibaz]

I'm still experiencing this on 15.3.2 when running mocha to execute tests :(

[gaearon]

Please file an issue with a test case reproducing it. I'm afraid we can't help otherwise.

(But also run npm ls react just to make sure you are on 15.3.2.)