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.62k stars 263 forks source link

[Bug] Debugging doesn't work after ejecting from an Expo project #1659

Closed kenny1983 closed 3 years ago

kenny1983 commented 3 years ago

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

Hi guys! First of all thanks for this awesome extension; it used to work great when I was working in a managed Expo project, but now that I have ejected, I'm struggling to get it to work properly. Steps taken to set this up:

  1. Ran adb connect <my phone's IP>:5555 and adb reverse tcp:8081 tcp:8081.
  2. Confirmed that adb devices correctly shows my connected device.
  3. Ran the following debug config from VS Code:
    {
    "name": "Run and Debug",
    "request": "launch",
    "type": "reactnative",
    "cwd": "${workspaceFolder}",
    "platform": "android"
    }
  4. Waited for about 5 - 10 minutes for the packager to start up, connection to succeed and building/installing/running the app to succeed with a few errors/warnings (see below).
  5. Enabled debugging in the app (shake device to access dev menu -> tap Debug).
  6. App reloads and crashes with the typical React Native red banner error screen. This step is a little harder to debug since the app crashes almost immediately, and from the brief glimpse that I get of the error message, it seems to change intermittently depending upon the exact circumstances. LMK if you need me to dig a little deeper into this.

Expected behavior

App loads normally and execution pauses at breakpoint set in VS Code.

Debug output

Debug Console ```text Launching the application 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 is already running. [Info] Prewarming bundle cache. This may take a while ... [Info] About to get: http://localhost:19000/index.bundle?platform=android [Thu Sep 02 2021 10:06:37.429] BUNDLE ./index.js [Warning] The Bundle Cache was prewarmed. [Info] Building and running application. events.js:352 throw er; // Unhandled 'error' event ^ Error: EPERM: operation not permitted, lstat 'd:\Dev\Hobby_Programming\Web\React-Native\Meals2U\android\app\build\generated\res\react\debug\raw\node_modules_expo_vectoricons_build_vendor_reactnativevectoricons_fonts_fontisto.ttf' Emitted 'error' event on NodeWatcher instance at: at NodeWatcher. (d:\Dev\Hobby_Programming\Web\React-Native\Meals2U\node_modules\sane\src\node_watcher.js:291:16) at FSReqCallback.oncomplete (fs.js:192:21) { errno: -4048, code: 'EPERM', syscall: 'lstat', path: 'd:\\Dev\\Hobby_Programming\\Web\\React-Native\\Meals2U\\android\\app\\build\\generated\\res\\react\\debug\\raw\\node_modules_expo_vectoricons_build_vendor_reactnativevectoricons_fonts_fontisto.ttf' } [Info] Enable JS Debugging [Info] Starting Packager ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere [Info] Packager started. ```
Developer Tools console ```text console.ts:137 [Extension Host] (node:4412) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.(Use `Code --trace-deprecation ...` to show where the warning was created) S @ console.ts:137 TMScopeRegistry.ts:45 Overwriting grammar scope name to file mapping for scope source.java. Old grammar file: file:///c%3A/Program%20Files/Microsoft%20VS%20Code/resources/app/extensions/java/syntaxes/java.tmLanguage.json. New grammar file: file:///c%3A/Users/Kenny/.vscode/extensions/redhat.java-0.81.0/syntaxes/java.tmLanguage.json register @ TMScopeRegistry.ts:45 console.ts:137 [Extension Host] Congratulations, your extension "vscode-postgres" is now active! console.ts:137 [Extension Host] previousVersion 1.2.2 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 notificationsAlerts.ts:40 The terminal process "C:\WINDOWS\System32\cmd.exe" terminated with exit code: 1. onDidChangeNotification @ notificationsAlerts.ts:40 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) $onExtensionRuntimeError @ mainThreadExtensionService.ts:64 mainThreadExtensionService.ts:63 [[object Object]]s.tmpDir is not a function $onExtensionRuntimeError @ mainThreadExtensionService.ts:63 mainThreadExtensionService.ts:64 TypeError: s.tmpDir is not a function at e._sendFirstFileOnDisk (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:25358) at Timeout._onTimeout (c:\Users\Kenny\.vscode\extensions\msjsdiag.vscode-react-native-1.6.1\dist\rn-extension.js:1:24162) at listOnTimeout (internal/timers.js:554:17) at processTimers (internal/timers.js:497:7) ```

Environment

Please tell us about your system and your project:

Common
 ✓ Node.js
 ✓ yarn
 ✖ Python
   - Version found: N/A
   - Version supported: >= 2.x < 3

Android
 ✓ JDK
 ✖ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME

Errors:   2
Warnings: 0

Usage
 › Press f to try to fix issues.
 › Press e to try to fix errors.
 › Press w to try to fix warnings.
 › Press Enter to exit.
Common
 ✓ Node.js
 ✓ yarn
 ✖ Python
   - Version found: N/A
   - Version supported: >= 2.x < 3

Android
 ✓ JDK
 ✖ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME

Errors:   2
Warnings: 0

Usage
 › Press f to try to fix issues.
 › Press e to try to fix errors.
 › Press w to try to fix warnings.
 › Press Enter to exit.

N.B. I believe the errors are false positives since I do have Python and Android Studio installed :@ npx ... doctor commands in general seem to always have these kinds of issues for me...

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.65 GB / 7.73 GB
  Binaries:
    Node: 14.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.30.0. - /c/Program Files/Git/cmd/git
  Virtualization:
    VirtualBox: 6.1.26 - C:\Program Files\VirtualBox\vboxmanage.EXE
  SDKs:
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1, 30.0.2, 30.0.3
      System Images: android-23 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      Versions: 10.0.18362.0
  IDEs:
    VSCode: 1.59.1 - C:\Program Files\Microsoft VS Code\bin\code.CMD
    Visual Studio: 16.8.30907.101 (Visual Studio Community 2019)
  Languages:
    Bash: 5.0.3 - C:\WINDOWS\system32\bash.EXE
    Java: 11.0.10 - /c/Program Files/Android Studio/jre/bin/javac
    Perl: 5.32.0 - C:\msys64\usr\bin\perl.EXE
  Databases:
    SQLite: 3.32.2 - C:\Users\Kenny\AppData\Local\Android\platform-tools\sqlite3.EXE
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.84)

MTIA for any help to debug this frustrating issue 😄

JiglioNero commented 3 years ago

Hi @kenny1983 and sorry for long response. Unfortunately we could not reproduce your error with following steps: 1) Init bare Expo project via command expo init ExpoProject -t bare-minimum@sdk-40 2) Execute expo eject in created ExpoProject root 3) Execute following commands one by one

adb tcpip 5555
adb connect <DEVICE_ID>: 5555
adb reverse tcp: 8081 tcp: 8081

4) Confirmed that adb devices correctly shows connected device. 5) Ran the following debug config from VS Code:

{
    "name": "Run and Debug",
    "request": "launch",
    "type": "reactnative",
    "cwd": "$ {workspaceFolder}",
    "platform": "android"
}

6) Waiting for the building and installation of the application on the device 7) After starting the application, open DevMenu and enable debug mode 8) Success

If you are unable to reproduce this error with our steps too, then it would be very helpful if you could provide a small demo project that reproduces this error and steps for reproduce it.

kenny1983 commented 3 years ago

Hi @JiglioNero,

After waiting for your response and not getting one for almost a week, I gave up and uninstalled this extension. After receiving your response this morning, I have reinstalled the extension and can confirm that the error is no longer occuring.

If I happen to come across any further problems, I'll be sure to let you guys know. Thanks 😄

JiglioNero commented 3 years ago

@kenny1983 We are glad that your problem has been resolved, please feel free to contact us at any time :+1:

kenny1983 commented 3 years ago

Thanks, @JiglioNero , will do!