unknown named module: 'crypto' when I enable Debug JS Remotely.

[tianjyan]

Hi Team, I am using project https://github.com/jitsi/jitsi-meet and want to debug the Android code.

So I setup the environment as the doc said.

Actual Behavior

I get the error when I enable Debug JS Remotely. Here is a screenshot from my phone.

Expected Behavior

I should can debug the project.

Software versions

• React-Native VS Code extension version: 0.6.12
• VSCode version: 1.25.1
• OS platform and version: macOS 10.13.6
• NodeJS version: 8.11.3
• React Native version: 0.55.4
• Expo SDK version (include if relevant): n/a

Outputs (Include if relevant)

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

OS: darwin x64
Adapter node: v7.9.0 x64
vscode-chrome-debug-core: 3.17.3
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 8163
Unknown named module: 'crypto'
ExceptionsManager.js:63
Module AppRegistry is not a registered callable module (calling runApplication)

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

[Warning] Couldn't read packager's options from exp.json, continue...

[Info] Starting Packager

Scanning folders for symlinks in /Users/tianjyan/Documents/jitsi-meet/node_modules (21ms)
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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/tianjyan/Documents/jitsi-meet
   /Users/tianjyan/Documents/jitsi-meet/.vscode 


Metro Bundler ready.

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

Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
 DELTA  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1291/1291), done.

 DELTA  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

 MAP  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1291/1291), done.

[Info] Packager is already running.

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

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

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

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

[Info] Enable JS Debugging

Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
 DELTA  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

 MAP  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1291/1291), done.

Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
 DELTA  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

 MAP  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

[Info] Packager is already running.

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

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

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

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

[Info] Enable JS Debugging

Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
Starting custom debugger by executing: echo A debugger is not needed:  "/Users/tianjyan/Documents/jitsi-meet" "/Users/tianjyan/Documents/jitsi-meet/.vscode"
 BUNDLE  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1291/1291), done.

 MAP  [android, dev] ./index.android.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

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

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

 INFO no standard startup: not just one text editor
console.ts:136 [Extension Host] (node:68849) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
t.log @ console.ts:136

By the way, I can debug the project in Chrome Developer Tools.

And also here is my step that I setup the environment.

• Clone the jitsi-meet project.
• Use VSC to open the project.
• Run npm install in VSC's terminal.
• Create the package.json file as doc#Debugging React Native applications said.
• In the Command Palette, type React Native and choose a command.
• After the apk is installed on my phone, I shake the phone and enable Debug JS Remotely
• Then I click the Debug Android button with green arrow.
• The screen that I attach above shows.

[ruslan-bikkinin]

Hi @tianjyan and thanks for submitting it.
The cause of the issue is that extension debugger spawns debugger worker from within node process and worker inherits all globals from it, especially process.versions.
App, in its turn, depends on js-md5 package which is md5 implementation for JS. This package tries to detect whether it is started in node or not by checking process.versions variable: if it exists then it "thinks" that it is started in node and falls back to use crypto core module which is unavailable in React Native runtime because it uses pure JS engine to run JS code (not necessarily node). That's why error happens.
I've fixed it in #748 so as soon as it will be merged and new version will be released you are good to go to use extension debugger for this project. We are going to release new version on this week.