react-native inspector not Showing component file name and it's line number

[dasDeepankar]

trafficstars

Description

After updating to latest react native 0.71.7, not able to see component file name and with it's code line number.

React Native Version

0.71.7

Output of npx react-native info

System: OS: macOS 13.3.1 CPU: (10) x64 Apple M1 Pro Memory: 13.20 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm Watchman: Not Found Managers: CocoaPods: 1.12.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9862592 Xcode: 14.3/14E222b - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /Library/Java/JavaVirtualMachines/openlogic-openjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.7 => 0.71.7 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Step to reproduce : go to app press D , will see a inspector option. then inspect any element, observe only react native component are showing. we are not able to comment file name and code line number.

please help here.

Snack, code example, screenshot, or link to a repository

no file name and code line is there.i have scroll to it's edge also no file name with line was present. please help here

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[dasDeepankar]

after upgrade to 0.71.8. issue still persist.

System: OS: macOS 13.3.1 CPU: (10) x64 Apple M1 Pro Memory: 13.20 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm Watchman: Not Found Managers: CocoaPods: 1.12.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9862592 Xcode: 14.3/14E222b - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /Library/Java/JavaVirtualMachines/openlogic-openjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.8 => 0.71.8 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

[mamidala]

Yes, facing the after react native upgrade to 0.71.7

[mobster1940]

I have this problem too since updating to 0.71

[dasDeepankar]

@mobster1940 can you please confirm what was your previous react native version.

[weinixuehao]

mark

[mobster1940]

@mobster1940 can you please confirm what was your previous react native version.

It was 0.48 before

[3rdp]

This is from a brand new React Native project. React Native 0.71.12 seems to have this feature missing.

If you can give some hints at what parts of the codebase are responsible for this feature, please reach out.

[danieloi]

same issue here

[hewr-srood]

This feature is still missing in "react-native": "0 .72.6"

[matonga]

I have this same problem in component inspector, and also the same info is not shown in component stack traces, example:

 ERROR  Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (created by View)
    in View (created by ListItem)
    in ListItem (created by Main)
    in RCTView (created by View)
    in View (created by Main)
    in RCTView (created by View)
    in View (created by Main)
    in RCTView (created by View)
    in View (created by Main)
    in RCTView (created by View)
    in View (created by Main)
    in Main (created by AppContent)
    in RCTView (created by View)
    in View (created by AppContent)
    in AppContent (created by App)
    in SesionProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in OrbitrixApp(RootComponent), js engine: hermes

Notice the missing file and line number, as opposed to the examples in https://morioh.com/a/50619ce875da/common-bugs-in-react-native

react: 18.2.0 react-native: 0.72.7

Should I downgrade to a previous react native version to have this feature? which is the last version where this feature was working? it really helps debugging a lot.

[rahulpunchh]

still missing?

[danieloi]

I found a solution to this.

Before I export the component I need to set the displayName

The issue was due to wrapping my components with the observer from mobx.

So in every component I want to be able to inspect I basically add

MyComponent.displayName = "whatever name I want to see in the `inspector"

and then

export { MyComponent }

Shameless plug: Here's my YouTube www.youtube.com/@mayowadan

[ShashankPunchh]

Same issue exist on "react-native": "0.73.8" Any update?

[punchharpit]

Any update?