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

https://github.com/facebook/react/issues/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 https://github.com/facebook/react/issues/28544#issuecomment-1991591646, 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 https://github.com/facebook/react/pull/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