Vscode-react-native: Error while executing command "react-native run-android --no-packager". (error code 101)

[reinkepatrick]

Actual Behavior

1. Start debugging
2. run packager
3. Error while executing command "/Users/reinkepatrick/Documents/webrtc/node_modules/.bin/react-native run-android --no-packager". (error code 101)

Expected Behavior

1. Start debugging
2. Run application on both connected devices

Software versions

• React-Native VS Code extension version: 0.13.1
• VSCode version: 1.40.1
• OS platform and version: Mac Catalina 10.15.1
• NodeJS version: 10.15.1
• React Native version: 0.61.4

When I try the same command on my bash it works...

[SounD120]

Hi @reinkepatrick and thanks for reaching us. Could you please send us your output logs as described in our issue template? This information will be very helpful for better understanding of the situation from our side. Thanks.

[reinkepatrick]

Oh, I'm sorry, I didn't think it was relevant because there's nothing interesting in it.

Outputs (Include if relevant)

• Output of the Debug Console (View -> Toggle Debug Console):

OS: darwin x64
Adapter node: v12.4.0 x64
vscode-chrome-debug-core: 6.8.2
Could not debug. Error while executing command '/Users/reinkepatrick/Documents/webrtc/node_modules/.bin/react-native run-android --no-packager': Error while executing command '/Users/reinkepatrick/Documents/webrtc/node_modules/.bin/react-native run-android --no-packager' (error code 101)

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

[Info] Starting Packager

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/reinkepatrick/Documents/webrtc 

Loading dependency graph, done.
[Info] Packager started.

[Info] Prewarming bundle cache. This may take a while ...

[Info] About to get: http://localhost:8081/index.bundle?platform=android

 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (520/520), done.

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

[Error] Error: Error while executing command '/Users/reinkepatrick/Documents/webrtc/node_modules/.bin/react-native run-android --no-packager': Error while executing command '/Users/reinkepatrick/Documents/webrtc/node_modules/.bin/react-native run-android --no-packager' (error code 101)

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

console.ts:137 [Extension Host] No editors associated with document: /Users/reinkepatrick/Documents/webrtc/libs.md
t.log @ console.ts:137
console.ts:137 [Extension Host] [vscode-icons] v9.6.0 activated!
abstractExtensionService.ts:396 [xabikos.JavaScriptSnippets]: Unknown language in `contributes.JavaScriptSnippets.language`. Provided value: vue
_logMessageInConsole @ abstractExtensionService.ts:396
extensionHost.ts:201 Extension Host
extensionHost.ts:202 Debugger attached.
2console.ts:137 [Extension Host] (node:3974) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
t.log @ console.ts:137
2console.ts:137 [Extension Host] (node:3974) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
t.log @ console.ts:137

[SounD120]

Thanks @reinkepatrick . Could you please also add outputs from View -> Toggle Output -> Select React Native: Run android channel? As seen from your logs there might be some errors during run-android command execution, so the relevant logs should be there.

[reinkepatrick]

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/reinkepatrick/Documents/webrtc/android/local.properties'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s

    at checkExecSyncError (child_process.js:616:11)
    at execFileSync (child_process.js:634:13)
    at runOnAllDevices (/Users/reinkepatrick/Documents/webrtc/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:39)
    at buildAndRun (/Users/reinkepatrick/Documents/webrtc/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:158:41)
    at Object.runAndroid [as func] (/Users/reinkepatrick/Documents/webrtc/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:106:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)

oh I see but how can I fix it?

[SounD120]

@reinkepatrick Hm, it looks like there is a problem in global PATH environment configuration. Since macOS Catalina VS Code uses zsh as a standard terminal for running debugging subprocesses, so zsh should be configured the same way as bash.
To fix that please try to create .zshrc file and add

export ANDROID_SDK_ROOT=<your path> 

variable there and then reload VS Code.
Please let us know if this helped.

[reinkepatrick]

Oh yes, I forgot the change and my VS Code Terminal was still switched to Bash, that explains why it works there and not in the extension. It works.

[cdelacombaz]

@reinkepatrick Hm, it looks like there is a problem in global PATH environment configuration. Since macOS Catalina VS Code uses zsh as a standard terminal for running debugging subprocesses, so zsh should be configured the same way as bash.
To fix that please try to create .zshrc file and add

export ANDROID_SDK_ROOT=<your path> 

variable there and then reload VS Code.
Please let us know if this helped.

I had the exact same problem and in my .zshrc I had ANDROID_SDK= by default. I added ANDROID_SDK_ROOT as you suggested and it worked. Thank you!