Unable to require NativeModules from custom debuggerWorker.js

[SounD120]

🐛 Bug Report

Hello, I am a maintainer of React Native Tools extension for Visual Studio Code. Extension is developed to provide React Native apps debugging to VS Code. It also provides some other functions to make development easier.

We use a custom debugger that works that way: extension downloads original debuggerWorker.js from Metro packager server, then patches it and runs it as a Node.js debug process. You can find the whole custom debuggerWorker.js that we use by this link.
We had added a feature for users so they could open Dev Menu on native app by calling a simple command in VS Code. It worked the following way:

• User call command to show dev menu in VS Code
• Extension sends an IPC message "vscode_showDevMenu" to the patched debuggerWorker.js
• Worker handles it this way:

    'vscode_showDevMenu': function () {
        try {
            var DevMenu = global.require('NativeModules').DevMenu.show();
        } catch (err) {
            // ignore
        }
    }
    process.on("message", function (message) {
    if (message.data && vscodeHandlers[message.data.method]) {
        vscodeHandlers[message.data.method]();
    } else if(onmessage) {
        onmessage(message);
    }
});

This trick worked in previous versions on React Native, but, infortunately, in the more recent ones (0.57+) it stopped working due to NativeModules package is couldn't be resolved.

To Reproduce

• Download VS Code
• Install React Native Tools from the Microsoft marketplace
• Prepare fresh application with react-native init command
• Run Debug iOS debug scenario using the instructions from Readme
• Enable Remote JS Debug
• When your application is loaded and status bar color is orange open Command Pallete (Shift+Cmd+P) and run command React Native: Show Dev Menu, React Native Dev Menu won’t be shown

Expected Behavior

require function resolves NativeModules correctly.

Code Example

We tried a different combinations of methods to fix it:

• require('NativeModules').DevMenu.show();
• require('react-native').NativeModules.DevMenu.show();
• global.require('NativeModules').DevMenu.show();
• global.require('react-native').NativeModules.DevMenu.show();

global.__debug__={require: require}; // cache Node js require
global.__debug__.require('NativeModules').DevMenu.show();

global.__debug__={require: require}; // cache Node js require
global.__debug__.require('react-native').NativeModules.DevMenu.show();

All of this approaches have led to error with description Cannot find module 'NativeModules'. On version 0.59.* require('react-native') have led to error with description Error: Cannot find module 'warnOnce' (may be connected to #23943)
In case when we required react-native package there were no modules that were resolved correctly at all.
Example:

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
      Memory: 1.13 GB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.0 - /usr/local/opt/node@10/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 27, 28
        Build Tools: 27.0.3, 28.0.3, 29.0.0
        System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.4 => 0.59.4 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Also, if you have any other suggestions/alternatives of how it could be done, please let us know.

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.59 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[Salakar]

Hey @SounD120

I'm using the __r global, here's the source for how I'm doing it - might help you apply this to VS Code (jet.context mentioned in the code is RN's global context).

The path to the lib will probably have to be required as react-native/Libraries/BatchedBridge/NativeModules.js.

[SounD120]

Hey @Salakar . Thanks a lot for your help. It works for us, that's how we solved this issue: microsoft/vscode-react-native#992

[Salakar]

@SounD120 you're welcome! Glad it helped 🎉