React-devtools: Can't print $r in console

[zhouhao27]

Got an error message:

VM370:1 Uncaught ReferenceError: $r is not defined(…)

When I input $r in console. But I can see the state and props.

[ngyikp]

On the Console section, just to the left of "Preserve log" checkbox, make sure it is selected to the page you are inspecting, which is most likely top

[zhouhao27]

Still doesn't work even after I selected the page.

[jaredly]

I think it should say top, like this

I just looked at that egghead page, and $r works fine. What version of Chrome are you on?

[zhouhao27]

My version is 50.0.2661.75 (Mac).

[kevinSuttle]

That fixed it @jaredly. Thanks!

[wolfgangbecker]

For those who are still struggling with this issue: The $r object is only accessible once the React devtool tab has been selected.

[cveld]

Suggestion: from the scope of the extension itself, you could write out an instructional message when one tries to retrieve $r. Good that this is issue is present in this repository as a form of documentation / instruction anyways :)

[kevinSuttle]

Great point @cveld. Now that's thinking like Elm. :)

[gaearon]

Closing, as the mistake is related to doing it in the wrong iframe context.

from the scope of the extension itself, you could write out an instructional message when one tries to retrieve $r

Not sure I understand how we could get access to the top-level context. Also doesn't feel right to pollute a different context than the one React app is running in.

[edi]

@gaearon It's not just the iframe context. I have been struggling a few days recently, up until I realised I need to open React tab in Developer Tools first, then and only then, $r will be accessible in the console.

Hope it helps.

EDIT:
Realised some people already noted that in this thread.

[gaearon]

I'm a bit confused—what did you expect $r to be before it’s open? Since it corresponds to currently selected component to DevTools.

[edi]

Well, since I am new to this, and most likely others here asking, are just like me, i supposed $r was some globally instantiated variable, referring to React instance, just like lodash does with it's _.

I think that's what people miss out when trying to access it.

[gaearon]

Oh, that's not what it means. It's more similar to how Chrome DevTools elements view gives you $0.

How did you learn about $r in the first place? I thought the message is only visible with DevTools open. Why did it occur to you that it might contain React, or that it exists?

[edi]

I saw it inside the React tab, on the upper right corner.
What I did not realise ( until now, when I read your post ) is that $r actually reflects the currently selected component, and secondly, I did not realise that $r is instantiated by DevTools. Just thought it's a global instance of the React app. My bad I guess.

Basically, I thought it might contain React just because that message says $r in the console. So that was my first thought. Maybe that message should be altered to reflect the nature of that data.

off-topic: any reason I am seeing all components named e after using webpack ( not using uglifyJS ) ? screen here

[gaearon]

Basically, I thought it might contain React just because that message says $r in the console. So that was my first thought. Maybe that message should be altered to reflect the nature of that data.

Got it! 👍
Any suggestions for a message that would be more descriptive but also fit there?

off-topic: any reason I am seeing all components named e after using webpack ( not using uglifyJS ) ? screen here

If you're not using Uglify then I don't know. Maybe you're using export syntax with arrow functions and don't use a Babel plugin that gives them implicit names.

[edi]

Any suggestions for a message that would be more descriptive but also fit there?

Hmm .. to be honest... maybe remove the current message from the right, add another gray divider, and write a message like Selected component (<CompName>) is now accessible via $r in console.

I think that gives you an idea that you need to select components in order to access them via $r in the console.

If you're not using Uglify then I don't know. Maybe you're using export syntax with arrow functions and don't use a Babel plugin that gives them implicit names.

All components are exported via export default class CompName extends React.Component. At least that's a starting point to look at. Found this: babel-plugin-transform-react-stateless-component-name, maybe it helps.

[gaearon]

No, that's some third party transform. I was referring to the default ones. Please provide a project reproducing the problem and file a new issue about this.

[edi]

Maybe something like this would be more descriptive ? http://i.imgur.com/8H1znGo.png

LE: Just figured out the issue of e components. Used webpack -p to generate the bundle... and -p ignores whatever config you make regarding mangle in webpack.config.js

[arifmahmudrana]

FYI I think $r will not be accessible for functional or stateless component. Am I right @gaearon ?

[edi]

@arifmahmudrana You could simply open React DevTools and try.

[arifmahmudrana]

@EduardJS I was mentioning that $r isn't available for stateless functional component which is logically also should be as they don't have any state & you can't change there props value also those are read only.

[edi]

@arifmahmudrana Not true. Checking state is not the only meaning of $r . Components, as you may have already observed have methods as well. Which, you can call via $r programatically if needed. Stateless components or even the functional ones can also have methods.

[arifmahmudrana]

@EduardJS $r is the instance of component so yes you can access anything from that component but for stateless functional component you don't have any functions it itself is a function which is a shorthand for render function AFAIK. So $r isn't accessible through console unlike other class based components which isn't stateless functional component.

[edi]

@arifmahmudrana You wrote about two different things.

1st message: functional or stateless
2nd message: stateless functional component

My reply is entirely correct for your first message, as you mentioned one or the other, whereas in your latest reply you only mentioned "stateless functional" ( a functional component is by itself stateless, so in my opinion the naming sounds like .. a double negation ) either way, make up your mind.

Just to conclude, you're wrong, both functional as well as stateless components can have methods.

1. Functional ( mostly means a simple return - function )
2. Stateless ( can always be a fully fledged React.Class )
3. Stateless Functional ( back to number 1 description )

Hope this clears the confusion for you 👍

[gaearon]

Re: function components — we're tracking them here https://github.com/facebook/react-devtools/issues/645.

[ATeam1]

This issue was resolved when I hid the console side bar. When the console side bar was open the error was $r undefined........ ????

[carnophager]

You need to select the "App" component in react dev tab and then "$r" receives a value.