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 266 forks source link

React Native Packager not starting through VSC #1440

Closed abegehr closed 3 years ago

abegehr commented 3 years ago

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

The react-native packager fails to start through VSC.

  1. Open react-native in VSC with React Native Tools 1.1.0 installed
  2. Open Command Palette (shift+cmd+P)
  3. run "React Native: Start Packager"
  4. Wait for error to come up in Output -> React Native.

Expected behavior

I expect the metro packager to start correctly.

Debug output

Output -> React Native:

[Info] Starting Packager

env: node: No such file or directory
[Error] Failed to start the React Native packager (error code 106)

Stack: Error: Failed to start the React Native packager (error code 106): Could not start the packager.
    at Function.getWrappedError (/Users/anton/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:152574)
    at Function.wrapError (/Users/anton/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:7111)
    at /Users/anton/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:202137
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
[Info] Starting Packager

env: node: No such file or directory

Environment

Please tell us about your system and your project:

Common
 ✓ Node.js
 ✓ yarn
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✖ JDK
   - Version found: 1.8.0_232
   - Version supported: >= 8
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI

Errors:   1
Warnings: 0
  System:
    OS: macOS 11.0
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 162.30 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0. - /usr/local/bin/pod
    Homebrew: 2.5.6 - /usr/local/bin/brew
    pip3: 20.1.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1200.0.32.4 - /usr/bin/clang
    FFmpeg: 4.3.1 - /usr/local/bin/ffmpeg
  Servers:
    Apache: 2.4.43 - /usr/sbin/apachectl
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.50.0 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 12.2/12B5018i - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_232 - /usr/bin/javac
    Perl: 5.32.0 - /usr/local/bin/perl
    PHP: 7.3.18 - /usr/bin/php
    Protoc: 3.13.0 - /usr/local/bin/protoc
    Python: 3.7.7 - /Users/anton/miniconda3/bin/python
    Python3: 3.7.7 - /Users/anton/miniconda3/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.31.1 - /Users/anton/miniconda3/bin/sqlite3
  Browsers:
    Chrome: 86.0.4240.80
    Safari: 14.0.1
SounD120 commented 3 years ago

Hi @abegehr. It seems that the VS Code is unable to run child process node because it's internal PATH environment variable doesn't contain the path to the Node.js executable. Do you have such path in your ~/.zshrc file? VS Code uses it when runs child processes, so I recommend to add NVM bindings there. Please let us know if it helped.

abegehr commented 3 years ago

Hey @SounD120, thanks for the quick answer. I am using https://github.com/lukechilds/zsh-nvm with antigen in my .zshrc for sourcing nvm. nvm is available in my normal and VSC shell and I can run yarn start, just through the VSC extension it does not seem to find node. Is zsh-nvm not supported and I need to source directly?

SounD120 commented 3 years ago

@abegehr I am not sure if the internal child processes can support zsh extensions, so this might work, but not officially tested with the extension. I recommend to stick to the React Native Getting Started documentation to setup the environment.

superandrew commented 3 years ago

I am having this issue randomly (not sure it is the exact same)

[Info] Making sure your project uses the correct dependencies for Expo. This may take a while...

Checking if this is Expo app......
[Info] Starting Packager

env: node: No such file or directory

This happens every time I start VS Code in a expo project and click debug. If I start the packager first, then it starts. So it seems the packager is unable to start when started from the debugger, in my case. I have to add that because of this I am using @expo/xdl 58.0.3.

SounD120 commented 3 years ago

Hi @superandrew . Could you please provide more information about your environment and your project (if this relevant)? I tested the Expo debugging with the nvm and the latest Node.js and this error doesn't reproduce.

superandrew commented 3 years ago

sure @SounD120

➜ npx expo doctor        
┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (3.28.0).                │
│   You are currently using expo-cli 3.20.3                               │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
Didn't find any issues with your project!
➜ npx envinfo    

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Xeon(R) CPU E5-1680 v2 @ 3.00GHz
    Memory: 309.04 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
    Gradle: 6.3 - /usr/local/bin/gradle
    Homebrew: 2.5.2 - /usr/local/bin/brew
    pip3: 20.1.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1200.0.32.2 - /usr/bin/clang
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  Virtualization:
    Docker: 19.03.13 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.50.1 - /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
    Vim: 8.1 - /usr/bin/vim
    Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_251 - /usr/bin/javac
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.3.11 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.8.5 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    PostgreSQL: 12.3 - /Applications/Postgres.app/Contents/Versions/latest/bin/postgres
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 86.0.4240.80
    Safari: 14.0
    Safari Technology Preview: 14.1
[Info] Making sure your project uses the correct dependencies for Expo. This may take a while...

Checking if this is Expo app......
[Info] Starting Packager

env: node: No such file or directory

this happens on every expo project I have. My @expo/xdl package is at 58.0.3 but this wasn't working even before that change. Same for expo-cli version which has been reverted

SounD120 commented 3 years ago

@superandrew Could you please also share your .zshrc config file? For example here is my config:

export JAVA_HOME="$(/usr/libexec/java_home)"
export ANDROID_HOME=/Users/$USER/Library/Android/sdk/
export ANDROID_SDK_ROOT=$ANDROID_HOME
PATH="$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools"
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
superandrew commented 3 years ago

sure.

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/Users/superandrew/.oh-my-zsh"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="robbyrussell"

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"
"~/.zshrc" 189L, 6771C
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/Users/superandrew/.oh-my-zsh"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="robbyrussell"

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"

# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"

# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"

# Uncomment the following line to change how often to auto-update (in days).
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/Users/superandrew/.oh-my-zsh"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="robbyrussell"

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"

# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"

# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"

# Uncomment the following line to change how often to auto-update (in days).
# export UPDATE_ZSH_DAYS=13

# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS=true

# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"

# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"

# Uncomment the following line to enable command auto-correction.
# ENABLE_CORRECTION="true"

# Uncomment the following line to display red dots whilst waiting for completion.
# COMPLETION_WAITING_DOTS="true"

# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"

# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
)

source $ZSH/oh-my-zsh.sh
source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh

export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

# Set Spaceship ZSH as a prompt
autoload -U promptinit; promptinit
prompt spaceship

# tabtab source for serverless package
# uninstall by removing these lines or running `tabtab uninstall serverless`
[[ -f /Users/superandrew/.nvm/versions/node/v8.9.4/lib/node_modules/serverless/node_modules/tabtab/.completions/serverless.zsh ]] && . /Users/superandrew/.nvm/versions/node/v8.9.4/lib/node_modules/serverless/node_modules/tabtab/.completions/serverless.zsh
# tabtab source for sls package
# uninstall by removing these lines or running `tabtab uninstall sls`
[[ -f /Users/superandrew/.nvm/versions/node/v8.9.4/lib/node_modules/serverless/node_modules/tabtab/.completions/sls.zsh ]] && . /Users/superandrew/.nvm/versions/node/v8.9.4/lib/node_modules/serverless/node_modules/tabtab/.completions/sls.zsh

# Add RVM to PATH for scripting. Make sure this is the last PATH variable change.
export PATH="$PATH:$HOME/.rvm/bin"

###-tns-completion-start-###
if [ -f /Users/superandrew/.tnsrc ]; then
    source /Users/superandrew/.tnsrc
fi
###-tns-completion-end-###

pyclean () {
    find . -type f -name '*.py[co]' -delete -o -type d -name __pycache__ -delete
}

# Support for bash
PROMPT_COMMAND='prompt'

# Mirrored support for zsh. See: https://superuser.com/questions/735660/whats-the-zsh-equivalent-of-bashs-prompt-command/735969#735969
precmd() { eval "$PROMPT_COMMAND" }

function prompt()
{
    if [ "$PWD" != "$MYOLDPWD" ]; then
        MYOLDPWD="$PWD"
        test -e .venv && workon `cat .venv`
    fi
}
nvm use 12.13
# Add Visual Studio Code (code)
export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
SounD120 commented 3 years ago

@superandrew Could you please also do the following:

  1. Open VS Code Developer Tools
  2. Open Console tab in it
  3. Run the following command process.env.PATH and copy the output here.

The Node path should be in this PATH variable, otherwise this might be the reason of problems.

superandrew commented 3 years ago

it seems it is

/Users/superandrew/.nvm/versions/node/v12.13.1/bin:.:/usr/local/ec2/ec2-api-tools-1.7.5.1/bin:/Users/superandrew/cmd:./cmd:/Users/superandrew/.fastlane/bin:/Users/superandrew/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Users/superandrew/.ebcli-virtual-env/executables:/Users/superandrew/cmd/:/usr/local/bin/:/Applications/Postgres.app/Contents/Versions/latest/bin:/Applications/mame0206-64bit:/Users/superandrew/Library/Android/sdk/platform-tools:/Users/superandrew/.rvm/bin:/Applications/Visual Studio Code.app/Contents/Resources/app/bin
➜ which node
/Users/superandrew/.nvm/versions/node/v12.13.1/bin/node

If I reload from the developer console, then the packager starts. I don't understand exactly why sometimes it starts and sometimes it doesn't.

SounD120 commented 3 years ago

@superandrew Have you faced similar errors when used other VS Code extensions?

superandrew commented 3 years ago

actually I'm not sure if I might answer "no" or "I don't know", as I am only seeing the problem when starting the react native tools debugger but I'm not sure if any other extension uses node. It is something that appeared all of a sudden like one month ago.

SounD120 commented 3 years ago

Hey @abegehr , @superandrew . It seems that the similar issues might happen due to the terminal.integrated.inheritEnv setting, could you please check if this option is enabled in your VS Code preferences? image

superandrew commented 3 years ago

in my case it is active. Should it be?

superandrew commented 3 years ago

@SounD120 not sure if it helps, but if I open the terminal and start node, it works. It seems mostly related to the packager. As I said before though, I am not on the latest version of the expo cli xdl in the extension.

SounD120 commented 3 years ago

in my case it is active. Should it be?

@superandrew Yes, it should be active.

Not sure if the XDL version is relevant here, since I tested this by installing the XDL 58.0.3 and faced no problems with the extension. I tried to copy your environment from .zshrc, but still this issue doesn't reproduce. Do you have any other specific configurations that might change your PATH during the Expo app launch? Does this reproduce on debugging native React Native apps(without Expo - Debug Android and Debug iOS scenarios)?

abegehr commented 3 years ago

For me, it is working now without any change on my side. I unticked and re-ticked the terminal.integrated.inheritEnv option before running again and it just works. I'll close this issue.

superandrew commented 3 years ago

in my case this fix doesn't work. Anything else I could try? updated everything, also xdl so now I don't have anything. This doesn't happen necessarily debugging, but as soon as I open vs code, wait for extension to load, and then "start packager" on the bottom bar.

[Info] Starting Packager

env: node: No such file or directory
[Error] Failed to start the React Native packager (error code 106)

Stack: Error: Failed to start the React Native packager (error code 106): Could not start the packager.
    at Function.getWrappedError (/Users/superandrew/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:152512)
    at Function.wrapError (/Users/superandrew/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:7049)
    at /Users/superandrew/.vscode/extensions/msjsdiag.vscode-react-native-1.1.0/dist/rn-extension.js:1:202075
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
superandrew commented 3 years ago

yesterday, while I was working on a project it got stuck and stayed this way. Now I ticked and unticked the "inherit" setting, restarted vs code and it works.. I'm puzzled.

superandrew commented 3 years ago

another change I made was to swap two lines from .zshrc

# Add Visual Studio Code (code)
export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
nvm use 12.13

(they were inverted). I don't think that changes.

SounD120 commented 3 years ago

@superandrew So this problem is resolved for you too?

superandrew commented 3 years ago

I hoped, but no, unfortunately not. I start VS Code, I wait a while, then I start the packager from the extension and (most of the times) I get this error. I open developer tools, reload, and then it starts. Any way to restart clean? I already tried disabling vs code sync ( I suspected it might cause issues like that in some cases ), uninstalling the extension and reinstalling it. Updated expo to last version, VS Code, etc. to no avail.

SounD120 commented 3 years ago

@superandrew Looks like an independent issue, so I opened a new one for your specific case.

rmaharba commented 3 years ago

For me, it is working now without any change on my side. I unticked and re-ticked the terminal.integrated.inheritEnv option before running again and it just works. I'll close this issue.

This works for me!

superandrew commented 3 years ago

it did for me as well, until it didn't 😂

rmaharba commented 3 years ago

it did for me as well, until it didn't 😂

Did it stop working then?

superandrew commented 3 years ago

it's kinda random. Sometimes it hapoens and I reload vs code.. I stopped asking 😀

mjstelly commented 3 years ago

None of the listed possible solutions works for me. I'll open a new issue.