Vscode-react-native: [Bug][Expo] XDLError: packagerPort must be an integer

[mjstelly]

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

This is my third stop in the dependency chain regarding this issue: expo-cli, vscode, and now, here. I hope this issue can be resolved here.

1. In VSC, create a debug config for Expo

        {
            "name": "Debug in Exponent",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent"
        }

1. Launch the config in the debugger

Expected behavior

The IDE launches my app in debug mode.

Debug output

Debug Console

OS: darwin x64
Adapter node: v12.8.1 x64
vscode-chrome-debug-core: 6.8.8
Could not debug. packagerPort must be an integer

React Native output channel

[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

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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/me/Documents/projects/my-project

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

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

[Info] Building and running application.

[Error] XDLError: packagerPort must be an integer

Developer Tools console

console.ts:137 [Extension Host] (node:63102) [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
console.ts:137 [Extension Host] (node:63102) [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
console.ts:137 [Extension Host] No editors associated with document: /Users/me/Documents/projects/my-project/.vscode/launch.json
t.log @ console.ts:137
console.ts:137 [Extension Host] (node:63102) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
t.log @ console.ts:137
console.ts:137 [Extension Host] (node:63102) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
t.log @ console.ts:137
log.ts:197   ERR No application in the Launch Services database matches the input criteria.: Error: No application in the Launch Services database matches the input criteria.

Environment

Please tell us about your system and your project:

npx expo doctor
┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (3.21.13).               │
│   You are currently using expo-cli 3.21.10                              │
│   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!

• envinfo:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) m3-6Y30 CPU @ 0.90GHz
    Memory: 29.67 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
    Homebrew: 2.4.0 - /usr/local/bin/brew
    pip3: 20.0.2 - /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.21.1 - /usr/bin/git
    Clang: 1100.0.33.17 - /usr/bin/clang
    Subversion: 1.10.4 - /usr/bin/svn
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.46.1 - /usr/local/bin/code
    Vim: 8.1 - /usr/bin/vim
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_242 - /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.7.7 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Brave Browser: 83.1.10.95
    Chrome: 83.0.4103.116
    Safari: 13.1.1

• React Native Tools extension version: 0.16.0
• Expo SDK version (if applicable): 38.0.4

[SounD120]

Hi @mjstelly and thanks for reaching us. We already investigated this problem and created the corresponding issue for expo-cli repository, since it is not connected to the extension. Here it is: https://github.com/expo/expo-cli/issues/2270. I'll left this issue opened until this error is resolved.

As a workaround you can try to reinstall Expo XDL package manually to update it to version without such errors (for example 57.8.32).
_Please keep in mind that if the extension will be reinstalled or updated, Expo XDL will be replaced by its latest version again, so the steps below will need to be repeated._
Please use the following instruction to update the package:

1. Open VS Code extensions folder in terminal by using one of the following commands:
   
   
   
   • Windows: cd %USERPROFILE%\.vscode\extensions
   
   
   • macOS: cd ~/.vscode/extensions
   
   
   • Linux: cd ~/.vscode/extensions
   
   
2. Go to msjsdiag.vscode-react-native-0.x.x (where x - your version numbers) extension folder and run these commands:

npm uni --no-save @expo/xdl
npm i --no-save @expo/[email protected]

[mjstelly]

That's interesting because the expo-cli team punted me to this repo saying it wasn't their issue. At any rate, thanks for updating me.

[superandrew]

Not sure why but I executed @SounD120 instructions, as I already did in the past, but it didn't work. Same error. Any Idea on how to restore? I followed @RedMickey 's advice not updating expo but upgrading the project sdk must have update it

[SounD120]

Hi @superandrew . Maybe it was connected to React Native Tools extension update? After updates XDL is reinstalled, so I recommend you to try this instruction once again on the latest RNT version (0.16.1)

[superandrew]

yes, I didn't intentionally update it but it must have been the reason. Now I fixed. I'm glad this extension and your team exists because I absolutely love this extension which is a huge lifesaver. Thank you.

[miguelmsoler]

Hi, I executed @SounD120 instructions and still get the XDLError. I'm on RNT version 0.16.1 so I don't know what could be happening.

I'm using code-oss, but that souln't be an issue.

`
[Info] Packager started.

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

[Info] Building and running application.

[Error] XDLError: packagerPort must be an integer

Loading dependency graph, done.
`

[RedMickey]

Hi @miguelmsoler, the extensions folder of VS Code OSS version is located by the path ~/.vscode-oss-dev/extensions.
So, it is just needed to change the extensions path in this instruction in this way:

1. Open VS Code extensions folder in terminal by using one of the following commands:
   
   
   
   • Windows: cd %USERPROFILE%\.vscode-oss-dev\extensions
   
   
   • macOS: cd ~/.vscode-oss-dev/extensions
   
   
   • Linux: cd ~/.vscode-oss-dev/extensions
   
   
2. Go to msjsdiag.vscode-react-native-0.x.x (where x - your version numbers) extension folder and run these commands:
   npm uni --no-save @expo/xdl npm i --no-save @expo/[email protected]

[RedMickey]

Hi @mjstelly, @superandrew, @miguelmsoler Expo has fixed this bug in a new version of the @expo/xdl package. To update the current version of this package on your side you just need to reinstall the extension and then relaunch VS Code editor.