React-devtools: Waiting for roots to load

[Slapbox]

Out of nowhere today, React Devtools in Electron no longer works. I have removed and reinstalled the devtools extension, confirmed the file is loaded via webpack, all the things I can think to check.

I get this related error in my terminal the first time I try to open the React Devtools tab in the Chrome/Electron Developer Tools:

[60944:0217/193116:ERROR:CONSOLE(12406)] "Uncaught TypeError: Cannot read property 'get' of undefined", source: chrome-extension://react-developer-tools/build/panel.js (12406)

Strangest of all to me is that I am able to get the developer tools to show the properties of individual React elements if I select them with the element selector tool. The tree does not show though, and I don't think I am seeing the full properties of the objects I select when they do show.

Edit: I have rolled back to several versions of my software where I am sure this was working, and it no longer does, which leads me to believe this is not due to any changes I have made.

Any help would be greatly appreciated, as I am dead in the water and out of ideas to try. Thank you!

What I see

Possible source of issue? _this.elementData's Entries are empty.

[Slapbox]

I don't necessarily know how to recreate this.

I removed all but my highest level React components from my project to ensure that it was not a bug related to code I had introduced, but that did not resolve it. As I mentioned I haven't recently added code and rolling back to previously working versions of my project does not resolve this either.

[gaearon]

Can you reduce your project to the smallest example possible and then share it?
It's going to be tough to figure out the cause without a runnable repro.

[Slapbox]

I figured as much. I can't release the source, but I can try to pare it down to something I can post publicly without issue very soon.

Thanks very much Dan.

[gaearon]

Possible source of issue? _this.elementData's Entries are empty.

If it's just an empty Map this shouldn't be an issue. The error says it's undefined.

[Slapbox]

@gaearon I'm no expert for sure and generally don't have to dive into this.

I am not 100% sure which of the ~130 .get() expressions is the one that returns undefined, if any. I know that when I looked at React Devtools on other pages the entries map was always populated which is what led me to believe that was a reasonable starting point for trying to pin this down.

[gaearon]

Just to be clear, do I understand it right that you're using the Chrome extension but inside an Electron app? Have you tried the standalone Electron DevTools?

[Slapbox]

Because I'm using a boilerplate, I have never had to get too deeply into this topic. I am using electron-devtools-installer to install the devtools. I have confirmed by running other projects that the devtool installation itself runs in general, but not on my app no matter how much I tear away from it.

I'm not entirely sure I know what you mean by standalone Electron DevTools and I don't want to give you the incorrect answer.

I am using:

    "devtron": "^1.4.0",
    "electron": "^1.4.15",
    "electron-devtools-installer": "^2.1.0",

My application is built on https://github.com/chentsulin/electron-react-boilerplate

[gaearon]

Oh okay. We never really supported that way of wiring it up so I'd like to confirm whether you have any problems with the supported way first.

I'm not entirely sure I know what you mean by standalone Electron DevTools

See here: https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md

[Slapbox]

Unfortunately this didn't make a difference.

The devtool knows when the React application comes online (It stops saying Waiting for React to connect...) but once connccted I get the same message, Waiting for roots to load...

[gaearon]

Can you show the exact full stack? You can inspect it by opening DevTools... inside the DevTools :P

[Slapbox]

You mean the full call stack? You can only do that by setting a breakpoint, right? If I'm thinking correctly, where would I set that?

I usually don't have to dive this deep in. Sorry for all the questions and thanks very much for your help.

[gaearon]

You can press Cmd+Shift+I in the DevTools app. That will open the Inspector in it. Since it likely crashed you should see the full error stack in the console. I would like to see it.

[Slapbox]

Unfortunately I am not getting any error messages, warnings, nothing, when I open the Developer Tools for the React Devtools window.

All that is in the React Devtools' Developer Tools' console is: [React DevTools] Connected

Really a fun one to try and diagnose, I know.

[gaearon]

Okay, this one is though.

Do you see errors in the console of your extension itself? I see 8 errors in the first screenshot—are these all the same? Can you provide their stacks?

[Slapbox]

I've had all of those for the better part of 6 months without issue. I found one build of my application where the roots load, so I am trying to figure out the cause now and I'll report back. If I can't, I'll upload a barebones version of my project and link it here to save you the trouble of trying to troubleshoot blind.

Thanks very much! I really appreciate your help!

[Slapbox]

Alright so here's what it was.. In my top level React component I had:

Old code (broken)

componentDidMount() {
    const now = moment();
    let newList = list.filter(item => 
                    (now.diff(item.time) <= 0)
                  );
}

New working code

componentDidMount() {
    const now = moment();
    let newList = list.filter((item) => {
                    (now.diff(item.time) <= 0)
                  });
}

Thanks for all your help @gaearon

[gaearon]

Hmm I'm not really sure how this related to DevTools, or what the mistake was.
Your new code snippet doesn't do any filtering at all because the return value gets ignored.

[Slapbox]

Thanks for pointing that out. I was so happy to have devtools back and ready to quit for the day I didn't test that the code actually worked.

Preface: I'm using Redux-Thunk.

So in the end the issue seems to be that the filtered results were then mapped, and the map was calling a function from my Redux Actions. This particular function did not return a dispatch. Additionally this particular function had an error in the case of some values passed in, but it was not throwing an error in plain devtools and everything seemed to run fine.**

To anyone reading, if you can do your action interchangeably in componentDidMount and componentWillMount, do it in componentWillMount as it will be abundantly clear this way if you have made an error in any case that would break React Devtools.

I believe this is resolved and not a bug in React Devtools. Thanks very much again @gaearon.