Bug: RDT commonly fails to find source about react

[hoxyq]

Thanks for reporting!

I don't have access to the sandbox you've shared.

Also, could you please upgrade to version 7 of the extension and see if it reproduces?

[doggybootsy]

It works on functional components without states now

I made the sandbox public (I think). If you do this snippet in console below in the sandbox. The button will be disabled, but if you run it twice the button will no longer be disabled but you cannot view the source of it

function MyComponent(params) {
    return React.createElement("div", {}, "Hello World");
}

example(React.createElement(MyComponent));

from react.

[hoxyq]

It works on functional components without states now

Probably the other way around?

It is a known issue that React DevTools can't find source code of the components that don't have any props or hooks used. All other components should work, which is a majority.

In your sandbox, only 2 user-space components don't have a source code - Child and AsyncChild.

[doggybootsy]

Oh, wait I didn't notice that Child and AsyncChild was going to the wrong area.

Would changing it back to how it was in that commit I mentioned before fix RDT failing to find sources?

[hoxyq]

Would changing it back to how it was in that commit I mentioned before fix RDT failing to find sources?

I don't think so.

The essence of the problem here is that there is no way for the browser extension to get a source location of the JavaScript function, which doesn't have any arguments. At least I am not aware of one, if it exists.

I have an idea of doing a lookup in page sources and trying to find fn.toString() contents in there, this could work.

[doggybootsy]

If RDT switches back to using inspect it should fix it. window.$r exposes the component type. So, if RDT executes inspect(window.$r.type) we wouldn't need arguments/hooks or whatever.

[hoxyq]

If RDT switches back to using inspect it should fix it. window.$r exposes the component type. So, if RDT executes inspect(window.$r.type) we wouldn't need arguments/hooks or whatever.

Are we talking about the same thing? Calling inspect() will navigate to the sources panel. This already works an it does navigate to the source code if you click on <> icon on the top right of the inspected element panel.

The problem is that React DevTools can only ask Chrome to navigate to the file, but it can't fetch the location of it, like file name and line number, which could be displayed under "source" section at the inspected element panel. That's why this is not displayed for Child and AsyncChild components.

[doggybootsy]

This already works an it does navigate to the source code if you click on <> icon on the top right of the inspected element panel.

This part is where it commonly fails.

I honestly didn't even know about the source section in the devtools page

[hoxyq]

This part is where it commonly fails.

Could you please share a reproducer where it fails? Or specify a component in your sandbox for which it fails.

[doggybootsy]

This previous comment has RDT failing #34581 (comment)

And both Child and AsyncChild have issues too, instead of viewing the source of those component's it opens where they're created instead