Bug: Source is not showing in 5.0.2

[pavel-plehanov]

Stand

DevTools version: 5.0.2-47cf347e4
Chrome 122.0.6261.129 x64, Edge 122.0.2365.80 x64

Propblem

In the DevTools -> Components -> source.
The path to the bundle.js file is specified.

v5.0.2

v5.0.0

Analog Issue

#28544
@hoxyq this is has nothing to do with reality.
But "source" work in "DevTools version: 5.0.0-993c4d003"
And doesnt wokr in "DevTools version: 5.0.2-47cf347e4"

Tested one application on the same PC at the same time in the defferent version DevTools.
Equal SourceMap

React version: 18

The current behavior

Open DevTools, choose component -> the source field contains the name of the component

The expected behavior

Open DevTools, choose component -> the source field says "bundle.js:[lineNumber]".

[shreeyansh-mesh]

It's working in firefox but not in chrome, likely recent chrome update broke it

[pavel-plehanov]

Он работает в Firefox, но не в Chrome, вероятно, недавнее обновление Chrome сломало его.

In my Firefox - v5.0.0

[hoxyq]

Hey @pavel-plehanov, thanks for reporting this.

As I've mentioned in #28544 (comment), this is expected change. In v5.0.0 RDT is using __debugSource field from fiber, which is soon will be removed with the next React release.

The way how RDT defines source has changed in #28471: bundle.js:[lineNumber] is the actual source, because this is what is loaded in the browser, unless you have source maps, which list other sources.

Technically, yes, this is a regression on RDT side, but an expected one, because previously used debugging fields are no longer available (removed from React) for different reasons.

[shreeyansh-mesh]

Hey @pavel-plehanov, thanks for reporting this.

As I've mentioned in #28544 (comment), this is expected change. In v5.0.0 RDT is using __debugSource field from fiber, which is soon will be removed with the next React release.

The way how RDT defines source has changed in #28471: bundle.js:[lineNumber] is the actual source, because this is what is loaded in the browser, unless you have source maps, which list other sources.

Technically, yes, this is a regression on RDT side, but an expected one, because previously used debugging fields are no longer available (removed from React) for different reasons.

How do I enable sourcemaps in CRA development mode?

[timdelange]

How would we debug legacy apps? How can we get hold of the older versions to install?

[KinIcy]

How would we debug legacy apps? How can we get hold of the older versions to install?

I followed the instructions here:

https://gist.github.com/juniorcesarabreu/115a4f5141cd1a841119c511c4c66d3f

I will downgrade until there is better support for this feature.

[timdelange]

After all, the #1 use of this extension is to find the correct file and line to edit in a large project. ATM when you point to a component all you get is chunk.xxxxx.js:2321312

[pavel-plehanov]

An archive of past versions is available in the Firefox

[gribelu]

I can confirm that downgrading to 5.0.0 fixes this issue in Chrome.
The issue is also present in Firefox but I didn't try the downgrade there.

[shamseer-ahammed]

Any one have any idea why source number is not showing ? for me it displaying like this

[imbasri]

thanks for solution.

[kblauhut]

After all, the #1 use of this extension is to find the correct file and line to edit in a large project. ATM when you point to a component all you get is chunk.xxxxx.js:2321312

I agree, this seems to be main use case for this feature. This was also used by other browser extensions which, up until this point, allowed you to directly navigate to a components code in your editor by clicking on them.
What would the use case of this feature be in its current version? I can't think of why one would want to inspect component code in the browser without being able to edit it. 🫤

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!