Vscode-react-native: [Bug] problem with multiroot workspace

[connectdotz]

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

I have a monorepo project setup with vscode's multiroot workspace. The react-native is under root/packages/mobile, where I execute react-native run-ios from. The tricky part is that react-native module and some others are hoisted to the root/node_modules therefore I have configured the metro.config.js as following, but this extension didn't seem to be using it or maybe I am missing something...?

// metro.cofig.js
const path = require('path');

module.exports = {
  projectRoot: path.resolve(__dirname, '../../'),
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules: require(path.resolve(
      __dirname,
      '../../node_modules/node-libs-react-native',
    )),
  },
};

• steps:
• added debug config: Debug iOS (mobile)
• launch the debug
• got error message window popup right away (see below)

Also tried to set react-native-tools.projectRoot": "../../" in the mobile directory; as well as react-native-tools.projectRoot": "./packages/mobile", in root directory and try to launch from root, none worked.

Expected behavior

I should be able to launch the app from the mobile directory, like from the terminal.

Debug output

Debug Console

Launching the application

React Native output channel

[Error] Error: Couldn't find react-native package in node_modules. Please, run "npm install" inside your project to install it. (error code 606)

Developer Tools console

Nothing there

Got a warning message window:

An error occurred while launching the application. Couldn't find react-native package in node_modules. Please, run "npm install" inside your project to install it. (error code 606) (error code 303)

Environment

Please tell us about your system and your project:

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

mobile $ npx react-native doctor
Common
 ✓ Node.js
 ✓ yarn
 ✓ npm
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✖ JDK
   - Version found: 1.8.0_242-release
   - 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: 1

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.

• envinfo:

```text
mobile $ npx envinfo
npx: installed 1 in 1.283s

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
Memory: 751.03 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
Homebrew: 2.4.16 - /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.23.0 - /usr/local/bin/git
Clang: 1200.0.32.29 - /usr/bin/clang
Servers:
Apache: 2.4.41 - /usr/sbin/apachectl
Virtualization:
Docker: 19.03.5 - /usr/local/bin/docker
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Nano: 2.0.6 - /usr/bin/nano
VSCode: 1.54.1 - /usr/local/bin/code
Vim: 8.1 - /usr/bin/vim
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Bash: 5.0.16 - /usr/local/bin/bash
Go: 1.13.7 - /usr/local/go/bin/go
Java: 1.8.0_242-release - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/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.6 - /usr/local/bin/python3
Ruby: 2.6.3 - /usr/bin/ruby
Databases:
SQLite: 3.28.0 - /Users/vsun/Library/Android/sdk/platform-tools/sqlite3
Browsers:
Chrome: 88.0.4324.192
Safari: 14.0.3```

• React Native Tools extension version: 1.4.0
• Expo SDK version (if applicable): N/A

[RedMickey]

Hi @connectdotz and thanks for reaching us. Now we are investigating the issue.
Could you please send us a minimal demo project with this problem, so we could reproduce and investigate the issue faster?

[RedMickey]

Hi @connectdotz, do you have a chance to look at this?

[connectdotz]

ok, I will try to get a repo this week

[connectdotz]

@RedMickey sorry for the delay, here is a sample repo you can play with: https://github.com/connectdotz/react-native-monorepo

[etatanova]

Hi @connectdotz , we've investigated your issue and opened the PR with a fix, which allows to pass a path to cwd value in a debug configuration for each project in multiroot project. Now you can debug a React Native application by modifying your configuration via setting the value to cwd field: cwd: "${workspaceFolder}/packages/ReactNativeApp" (in your case).

Could you please check if this fix works for you? You can install the extension with this fix by following these steps:

• Download and unzip compiled extension VSIX
• Uninstall the extension
• Reopen VS Code
• Click Extensions -> Views and More Actions... -> Install from VSIX... And select the downloaded VSIX

Feel free to ask if you have any questions.

[etatanova]

Hi @connectdotz, do you have a chance to look at this?

[connectdotz]

@etatanova I installed the linked vsix file, but still not working....

Now you can debug a React Native application by modifying your configuration via setting the value to cwd field

you mean to modify the launch.json? which one? the one on project root? When I did that still get this error:

An error occurred while launching the application. Couldn't find react-native package in node_modules. Please, run "npm install" inside your project to install it. (error code 606) (error code 303)

here is the launch.json from the project root:

"configurations": [
  {
      "name": "Debug iOS",
      "request": "launch",
      "type": "reactnative",
      "cwd": "${workspaceFolder}/packages/ReactNativeApp",
      "platform": "ios"
    }
]

BTW, I used the debug panel to launch the specific debug config, not via the command palette.

[RedMickey]

Hi @connectdotz, we improved the previous version of the fix and tested it on the demo project in 2 ways:

1. In react-native-monorepo root folder
   
   
   
   • Opened react-native-monorepo in VS Code
   
   
   • Added the following launch.json file to the react-native-monorepo/.vscode folder:
     
     { "configurations": [ { "name": "Debug iOS", "request": "launch", "type": "reactnative", "cwd": "${workspaceFolder}/packages/ReactNativeApp", "platform": "ios" } ] }
   
   
   • Run Debug iOS debugging scenario
   
   
2. In react-native-monorepo/packages/ReactNativeApp folder
   
   
   
   • Opened react-native-monorepo/packages/ReactNativeApp in VS Code
   
   
   • Added the following launch.json file to the react-native-monorepo/packages/ReactNativeApp/.vscode folder:
     
     { "configurations": [ { "name": "Debug iOS", "request": "launch", "type": "reactnative", "cwd": "${workspaceFolder}", "platform": "ios" } ] }
   
   
   • Run Debug iOS debugging scenario
   
   

In both cases, we were now able to debug the application without any problems.
Here is the new VSIX with the fix. Could you please check if it works for you?

[connectdotz]

hi thanks for the update, I will try to test it in the next few days.