microsoft / vscode-react-native

VSCode extension for React Native - supports debugging and editor integration
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
Other
2.63k stars 267 forks source link

[Bug] React Native tools doesn't work #2195

Closed zhouhao27 closed 2 months ago

zhouhao27 commented 2 months ago

🐛 What is the bug? How can we reproduce it?

React Native tools doesn't work for me in my Mac 10.15.

  1. Create a RN project: npc create-expo-app@latest -t
  2. I choose Navigation (TypeScript)
  3. Start my application: npx start -c --dev-client
  4. Run iOS simulator by pressing: i
  5. Create a launch.json file for debugging
 "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true
    }
  ]
}
  1. Click Attach to Package to start debugging
  2. The bottom status bar is never turned to orange colour
  3. If I click Open Debugger in menu, it always open Google Chrome instead of debugging inside VS Code.

Expected behavior

Break point should be reached.

Debug output

Debug Console ```text Attaching to the application Starting debugger app worker. Established a connection with the Proxy (Packager) to the React Native application ```
React Native output channel ```text [Info] Packager started. ```
Developer Tools console ```text N.A. ```

I'm not able to find Developer Tool.

Environment

Please tell us about your system and your project:

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check for issues with metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check if the project meets version requirements for submission to app stores
✔ Check native tooling versions
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK
System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M2
    Memory: 977.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.15.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
    bun: 1.1.21 - ~/.bun/bin/bun
    Watchman: 2024.06.17.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
    Homebrew: 4.3.18 - /opt/homebrew/bin/brew
    pip3: 24.1.1 - /opt/miniconda3/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 16.0.0 - /usr/bin/gcc
    Git: 2.39.5 - /usr/bin/git
    Clang: 16.0.0 - /usr/bin/clang
    FFmpeg: 7.0.1 - /opt/homebrew/bin/ffmpeg
    Curl: 8.7.1 - /usr/bin/curl
    OpenSSL: 3.0.13 - /opt/miniconda3/bin/openssl
  Servers:
    Apache: 2.4.59 - /usr/sbin/apachectl
  Virtualization:
    Docker: 27.1.1 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
  IDEs:
    Android Studio: 2024.1 AI-241.18034.62.2411.12169540
    VSCode: 1.92.2 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: 16.0/16A5171r - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.23 - /usr/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python: 3.12.3 - /opt/miniconda3/bin/python
    Python3: 3.12.3 - /opt/miniconda3/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.45.3 - /opt/miniconda3/bin/sqlite3
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 18.0
zhouhao27 commented 2 months ago

This workaround works for me.

EzioLi01 commented 2 months ago

Expo 51 is using Hermes engine as default. It should work with Hermes debugging config.

zhouhao27 commented 2 months ago

Expo 51 is using Hermes engine as default. It should work with Hermes debugging config.

Got the following error message in Output when I tried to use Hermes:

[Info] Need to check main file and entry point of open module, will setup and write new content if they're not existing. Path: /Users/zhouhao/Projects/Study/rn/my-app/node_modules/open

[Info] Find open-main.js and entry in open module, skip setup...

[Info] Starting Packager

error No Metro config found in /Users/zhouhao/Projects/Study/rn/my-app. [Error] Error: Could not start the packager.

[Error] Error: Could not start the packager.

Error in Debug Console:

Launching the application An error occurred while launching the application. Could not start the packager. (error code 303)

My launch.json:

    {
      "name": "Debug iOS Hermes",
      "request": "launch",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "platform": "ios"
    },
EzioLi01 commented 2 months ago

Hey @zhouhao27 , if you still need help, could you please open a new issue with the demo to help me repro this error? Actually I cannot repro this in my local with sample app.