6

I'm putting together a streamlined development process with react and react-native that:

  • encourages packages,
  • uses babel to transform es6 to js (it compiles before publishing/installing),
  • has a playground that let's you play with both native and web components.

The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.

The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.

The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).

I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.

Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.

halfer
  • 19,824
  • 17
  • 99
  • 186
Darío Javier Cravero
  • 1,692
  • 13
  • 9

1 Answers1

10

I found out the following solution, based on the comment in default.config.js:

* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.

Create a rn-cli.config.js in the root of your project with the following contents:

var blacklist = require('react-native/packager/blacklist');

var config = {
  getBlacklistRE(platform) {
    return blacklist([
      /node_modules\/my-package\/excluded-dir\/.*/
    ]);
  }
};

module.exports = config;

The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.

Albert
  • 151
  • 1
  • 6
  • is it possible to ignore all files and folder for regex path? for instance, how would you ignore all beneath node_modules? – Guy Segal Jul 04 '16 at 06:50
  • You really don't want to 'ignore' all files under node_modules. Then your app will certainly won't work. – Albert Jul 17 '17 at 14:06
  • As of react-native 46. The blacklist has been moved to `metro-bundler`. Example here: https://github.com/facebook/react-native/issues/7271#issuecomment-321842044 – Shiki Nov 02 '17 at 12:52
  • It's not in `metro-bundler/src/blacklist.js` – arshbot Jan 22 '18 at 00:47
  • For posterity, this GH issue shows how to do this as of: 2018 February 20 answer that works with RN 0.53. https://github.com/facebook/react-native/issues/7271#issuecomment-321842044 – Special Character May 11 '18 at 23:40
  • Does anyone know how to do this for modules in sibling folders (I'm using Yarn Workspaces)? – Adam Gerthel Nov 21 '20 at 18:31