React-devtools: Waiting for roots to load... error message
I'm using React Developer Tools 0.14.9 on Chrome Version 50.0.2661.49 beta (64-bit) (OSX 10.10.5). I have cloned react-starter-kit (https://github.com/kriasoft/react-starter-kit) and modified it to make my app.
I tested the original react-starter-kit, and it works fine - it displays the React components as desired.
But when I fire up my app and inspect it, the React tab shows "Waiting for roots to load ... to reload the inspector [ click here ]"
What causes this message? Where do the "roots" come from? (I'm sure I have screwed something up, but ... what?) Thanks.
richb-hanover
All 19 comments
I'm getting the same error.
In the console I see:
backend.js:8441 Uncaught TypeError: Cannot read property 'props' of undefined
2color
on 30 Mar 2016
I'm writing a custom react renderer (https://github.com/Kasu/symphony/tree/custom-renderer/lib/surface/react-surface) and I'm experiencing the same problem ("Waiting for roots to load ... to reload the inspector [ click here ]"). It could be related to this issue.
If not, I'd still be greatful in some advice on where to look in react-devtools to understand where the roots come from. I tried to track down the "root" event from the bridge but I couldn't find where in react it comes from.
ksandin
on 31 Mar 2016
It probably comes from the "backend" folder. No one actively works on the devtools and has a good understanding of all the pieces so you'll have to dig around if you want to change stuff.
sophiebits
on 31 Mar 2016
@spicyj Found it! Thanks for the pointer!
It's hook.emit("root", ...) in https://github.com/facebook/react-devtools/blob/master/backend/attachRenderer.js
ksandin
on 31 Mar 2016
I'm getting a similar error as described in https://github.com/facebook/react-devtools/issues/105#issuecomment-206450315.
bobwhitelock
on 6 Apr 2016
I've investigated this some more, and I've been able to reproduce this issue consistently with the following gist: https://gist.github.com/BobWhitelock/8a3fd237a325668e659465a20555c84b. This should able to just be downloaded and the page viewed as-is, and the issue can be seen in the devtools and the error message within the console.
The error, at least in my case, seems to be due to the dynamic text creation using {} within the option element, the error only appears when this is present - I've no idea why this is causing this however.
I've not been able to reproduce the above linked issue as well, so I'm guessing there's something more going on in that case.
bobwhitelock
on 7 Apr 2016
@BobWhitelock Sounds like #248.
sophiebits
on 7 Apr 2016
Thanks @spicyj, that does look the same. Looks like there's a possible fix proposed in https://github.com/facebook/react-devtools/pull/345 also, but I've managed to work around this for the moment by creating the option text elsewhere and ensuring the option only has a single child.
bobwhitelock
on 8 Apr 2016
I still have this error when pre render my page? Note that I am new to react and don't understand much about it yet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
</head>
<body>
<div data-reactroot="" data-reactid="1" data-react-checksum="318384820"><!-- react-text: 2 -->Hello <!-- /react-text -
-><!-- react-text: 3 -->John<!-- /react-text --></div>
</body>
<html>
EDIT: A wait I think I understand now, I am not using react at all this way :)
gertcuykens
on 12 Aug 2016
you must to add this:
mapimienta
on 5 Sep 2016
you must to add this js, this js is from the babel core
https://npmcdn.com/[email protected]/browser.min.js
mapimienta
on 5 Sep 2016
This was likely a DevTools bug that got fixed in https://github.com/facebook/react-devtools/issues/345. Closing.
gaearon
on 15 Feb 2017
Still seeing this issue with React Devtools in Electron. Hadn't seen it until just today.
Slapbox
on 17 Feb 2017
@Slapbox What are you using it with? If React Native, it might be due to a bug in RN that is fixed in master. You can try applying https://github.com/facebook/react-native/pull/12305 and https://github.com/facebook/react-native/pull/12316 to RN locally. If you still experience it, please file an issue describing exactly how to reproduce this.
gaearon
on 17 Feb 2017
@gaearon Thanks for your response. I'm not using React Native. I made a report at #547
Slapbox
on 17 Feb 2017
Hey guys,
i am a beginner to react. My broswer is not rendering the hello world that i rendered in my js file.
I am attaching two examples screenshot
first image: i was running webpack-dev-server at localhost:8080, instead of displaying hello world it displays the way in the image
second image: This was displaying hello world when running the index.html file but the dev tools has error like waiting to load....
any suggestions would really help me
Thanks
sunkarashruthi
on 20 Apr 2017
Also React dev tools is not showing in the console of my first image
sunkarashruthi
on 21 Apr 2017
@sunkarashruthi I have run into this issue a few times and every single time it has been my own fault.
Are there any warnings or errors? That can cause this.
Is there anything that could possibly be happening in a way you don't expect that is not technically an error? In particular, check your ComponentWillMount()'s first and foremost.
Slapbox
on 21 Apr 2017
@Slapbox there was a CORS issue, which i fixed.
Thanks for responding
sunkarashruthi
on 21 Apr 2017
Related issues
sophiebits
路
5Comments
Riokai
路
5Comments
mmahalwy
路
3Comments
inoyakaigor
路
4Comments
bvaughn
路
4Comments
Most helpful comment
@sunkarashruthi I have run into this issue a few times and every single time it has been my own fault.
Are there any warnings or errors? That can cause this.
Is there anything that could possibly be happening in a way you don't expect that is not technically an error? In particular, check your
ComponentWillMount()'s first and foremost.