Packager cannot be started when using pnpm packager

[daniel-a126]

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

Please put here any steps, code or any information that can help us
reproduce the error on our side so we can fix it:

1. Install pnpm packager (see https://pnpm.io/installation)
2. Create a minimal RN project using pnpm packager and build it
3. Add Metro configuration:
   metro.config.js

   const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
   
   const config = {
     resolver: {
       unstable_enableSymlinks: true,
       unstable_enablePackageExports: true
     },
   };
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), config);
   

4. Run "React Native: Start Packager"

Package fails to start. See output channel for the error detail.

Expected behavior

Metro packager starts.

Debug output

Debug Console

(empty)

React Native output channel

[Error] Failed to start the React Native packager (error code 106)

Stack: Error: Failed to start the React Native packager (error code 106): The package 'opn' was not found. Error: Opn package location not found (error code 501) (error code 502)
	at o.getWrappedError (/Users/djkveton/.vscode/extensions/msjsdiag.vscode-react-native-1.13.0/dist/rn-extension.js:21:382537)
	at i.wrapError (/Users/djkveton/.vscode/extensions/msjsdiag.vscode-react-native-1.13.0/dist/rn-extension.js:21:374834)
	at /Users/djkveton/.vscode/extensions/msjsdiag.vscode-react-native-1.13.0/dist/rn-extension.js:21:374403

Developer Tools console

localProcessExtensionHost.ts:275 Extension Host
localProcessExtensionHost.ts:276 2024-10-17 10:54:52 debug [extension.js]: [MSG] TelemetryService: start: Flush Success

console.ts:137 [Extension Host] 2024-10-17 10:55:02 debug [extension.js]: [MSG] TelemetryService: start: Flush Success
localProcessExtensionHost.ts:275 Extension Host
localProcessExtensionHost.ts:276 2024-10-17 10:55:02 debug [extension.js]: [MSG] TelemetryService: start: Flush Success

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

⠏ Running diagnostics...warn Command failed with exit code 1: ruby -e require "Bundler"; gemfile = Bundler::Definition.build("Gemfile", nil, {}); version = gemfile.ruby_version.engine_versions.join(", "); begin; gemfile.validate_runtime!; rescue Bundler::GemfileNotFound; puts "No Gemfile"; exit 1; rescue Bundler::RubyVersionMismatch; puts "Bundle invalid Ruby"; STDERR.puts version; exit 2; rescue => e; STDERR e.message; exit 3; else; puts "Ok"; STDERR.puts version; end
/Users/djkveton/.asdf/installs/ruby/3.3.0/lib/ruby/site_ruby/3.3.0/bundler/definition.rb:36:in `build': /Users/djkveton/prj-kepler/PROJVEGA-224730-0.13.2/Jsapp/Gemfile not found (Bundler::GemfileNotFound)
	from -e:1:in `<main>'
Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ npm - Required to install NPM dependencies
 ✓ Watchman - Used for watching changes in the filesystem when in development mode
 ● Metro - Metro Bundler is not running

Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✖ JDK - Required to compile Java code
   - Version found: 1.8.0_422
   - Version supported: >= 17 <= 20
 ✖ Android Studio - Required for building and installing your app on Android
 ✖ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✖ Gradlew - Build tool required for Android builds
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: Not Found

iOS
 ✖ Xcode - Required for building and installing your app on iOS
   - Version found: N/A
   - Version supported: >= 12.x
 ✓ Ruby
 ✖ CocoaPods - Required for installing iOS dependencies
   - Version found: N/A
   - Version supported: >= 1.10.0
 ● ios-deploy - Required for installing your app on a physical device with the CLI
 ✓ .xcode.env - File to customize Xcode environment

Errors:   8
Warnings: 2

• envinfo:

  System:
    OS: macOS 14.7
    CPU: (10) arm64 Apple M1 Pro
    Memory: 80.63 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: 9.12.1 - ~/.nvm/versions/node/v18.20.4/bin/pnpm
    Watchman: 2024.09.30.00 - /opt/homebrew/bin/watchman
  Managers:
    Homebrew: 4.4.0 - /opt/homebrew/bin/brew
    pip3: 24.2 - ~/.kepler/kntools/sdk/0.13.3/.pyenv/shims/pip3
    RubyGems: 3.5.6 - /Users/djkveton/.asdf/shims/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 16.0.0 - /usr/bin/gcc
    Git: 2.46.1 - /opt/homebrew/bin/git
    Clang: 16.0.0 - /usr/bin/clang
    Curl: 8.7.1 - /usr/bin/curl
    OpenSSL: 3.3.2 - /opt/homebrew/bin/openssl
  Servers:
    Apache: 2.4.59 - /usr/sbin/apachectl
  Virtualization:
    Docker: 27.2.0 - /usr/local/bin/docker
    Docker Compose: 2.29.2 - /usr/local/bin/docker-compose
  IDEs:
    IntelliJ: 2024.1.3
    VSCode: 1.94.2 - /Users/djkveton/.kepler/kntools/sdk/0.13.3/vscode/VisualStudioCode.app/Contents/Resources/app/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_422 - /usr/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python: 3.12.6 - /Users/djkveton/.kepler/kntools/sdk/0.13.3/.pyenv/shims/python
    Python3: 3.12.6 - /Users/djkveton/.kepler/kntools/sdk/0.13.3/.pyenv/shims/python3
    Ruby: 3.3.0 - /Users/djkveton/.asdf/shims/ruby
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 129.0.6668.103
    Safari: 18.0.1

• React Native Tools extension version: 1.13.0
• Expo SDK version (if applicable): n/a

[EzioLi01]

Hey @daniel-a126 , thanks for reaching us. We have some logics in extension related to npm command and module. pnpm have some differences on structures. Will investigate to improve compatibility for pnpm, adding this in TODO list and any updates will comment here. Thank you!