Metro: Ignoring packages during dependency resolution

[higleyc]

Do you want to request a feature or report a bug? Question/feature

What is the current behavior?

We have a dependency which is built as a C library. In order to use and test this with our RN app, we have one package with our node bindings (node-dep) and another with our RN bindings (rn-dep). So our code looks like:

let dep = null
if (typeof navigator === 'undefined' || navigator.product !== 'ReactNative') {
    dep = require("node-dep")
} else {
    dep = require("rn-dep")
}

We blacklistRE this dependency because if it is discovered, you see this package itself specifies a main module field that could not be resolved, presumably because it is not a valid RN package.

The node version of the package is not needed when packaging for RN, but metro discovers the conditional code requiring it and complains that it can't be found:
error: bundling failed: Error: Unable to resolve module `node-dep` from `/home/omit/node_modules/other_dependency/file.js`: Module `node-dep` does not exist in the Haste module map or in these directories: /home/omit/node_modules

So either we blacklistRE the node package to exclude it, and it fails to be found (though not needed), or we do not blacklistRE and it fails to package because it's not an RN package.

What is the expected behavior?

Is there a way to tell metro to simply ignore any require("node-dep") and just have the app crash at runtime if it were encountered? I'd like to be able to blacklist the package directory and just have metro skip it over. dynamicDepsInPackages does not seem helpful here.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

metro.config.js:

const blacklist = require('metro-config/src/defaults/blacklist')
const blacklistRE = blacklist([/.*node-dep.*/])

module.exports = {
  resolver: {
    blacklistRE,
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

metro - 0.51.1 (determined by RN version)

yarn - 1.22.0

node - 10.17.0

OS - Linux

[nacho-carnicero]

Hey @higleyc I wanted to do the exact same thing, did you find a solution?

[higleyc]

@nacho-carnicero sadly, no. My "solution" was to just obfuscate the require by building the package name from an array - seems to prevent metro from discovering it.

[Slapbox]

@higleyc could you possibly provide an example of what you mean? blacklistRE is grossly inadequate for proper blacklisting capabilities - and seems to be ignored in rare cases even when it should result in a perfect match. One Web Assembly file and kaboom...

[higleyc]

@Slapbox sure, like this:

let dep
if (typeof navigator === 'undefined' || navigator.product !== 'ReactNative') {
    let pname = ""
    let x = ["n", "o", "d", "e", "-", "d", "e", "p"]
    for (let i = 0; i < x.length; ++i) {
        pname += x[i];
    }
    dep = require(pname)
} else {
    dep = require('rn-dep')
}

[Slapbox]

Clever! Really appreciate the follow-up!

[nacho-carnicero]

I ended up finding a solution that works great for my use case and that would work for this one without having to do that funky obfuscation. This solution uses the resolveRequest
option of the metro config in order to point to a dumb file for the dependencies that are problematic, and uses the normal resolver for the others. Make sure to add the packages you want to ignore to the blacklistedModules array.

To make it work add this to your metro.config.js file:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const OriginalResolver = require("metro-resolver");
const path = require("path");

const blacklistedModules = ["https", "http", "zlib"];

module.exports = {
  resolver: {
    resolveRequest: (context, realModuleName, platform, moduleName) => {
      if (blacklistedModules.includes(moduleName)) {
        return {
          filePath: path.resolve(__dirname + "/src/shim-module.js"),
          type: "sourceFile"
        };
      } else {
        return OriginalResolver.resolve(
          { ...context, resolveRequest: undefined },
          moduleName,
          platform
        );
      }
    }
  }
};

In my case /src/shim-module.js is a file with this content:

/**
 * File that shims a module. See the file metro.config.js at the root
 */
module.exports = {};

Hope this helps!

[dafuga]

Thanks @nacho-carnicero, I had to make a small change to your code for it work with RN 0.61, but now it works great! Here is my resolver function in case it can help someone else:
```js
const OriginalResolver = require("metro-resolver");
const path = require("path");

const blacklistedModules = ["https", "http", "zlib"];

module.exports = {
resolver: {
resolveRequest: (context, moduleName, platform) => {
if (blacklistedModules.includes(moduleName)) {
return {
filePath: path.resolve(__dirname + "/src/shim-module.js"),
type: "sourceFile"
};
} else {
return OriginalResolver.resolve(
{ ...context, resolveRequest: undefined },
moduleName,
platform
);
}
}
}
};