Description
I'm unable to debug a new React Native app that's using Hermes by following the Hermes debugging instructions found here: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools
Upon following those steps and opening the console in the stand alone Chrome DevTools, I see this error:
DevTools failed to load source map: Could not load content for http://localhost:8081/index.map?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.tempRN0710RC3: Fetch through target failed: Cannot read properties of null (reading 'loadNetworkResource'); Fallback: Unknown error
Nothing shows up in the Sources tab. Navigating to that URL outside of the dev tools does load the source map file successfully.
I am able to debug successfully using Flipper - source maps seem to load fine there.
Version
0.71.0-rc.3
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 2.67 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 18.0.1.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.0-rc.3 => 0.71.0-rc.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
- Create a new React Native project using the command:
npx react-native init RN0710RC3 --version 0.71.0-rc.3
- Once created,
cd in to project directory. Run using yarn ios or yarn android
- Follow steps outlined in Hermes debugging documentation: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools
- Notice source maps don't load, unable to set breakpoints.
Snack, code example, screenshot, or link to a repository
No code example since it's reproducible using a new RN 70 or 71 project: npx react-native init RN0710RC3 --version 0.71.0-rc.3
Description
I'm unable to debug a new React Native app that's using Hermes by following the Hermes debugging instructions found here: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools
Upon following those steps and opening the console in the stand alone Chrome DevTools, I see this error:
Nothing shows up in the
Sourcestab. Navigating to that URL outside of the dev tools does load the source map file successfully.I am able to debug successfully using Flipper - source maps seem to load fine there.
Version
0.71.0-rc.3
Output of
npx react-native infoSteps to reproduce
npx react-native init RN0710RC3 --version 0.71.0-rc.3cdin to project directory. Run usingyarn iosoryarn androidSnack, code example, screenshot, or link to a repository
No code example since it's reproducible using a new RN 70 or 71 project:
npx react-native init RN0710RC3 --version 0.71.0-rc.3