How to make Metro (React Native packager) ignore certain directories

Question

Problem:

My project has a @providesModule naming collision when trying to run react-native run-ios from the command line. It is conflicting with autogenerated dir dist/ which is created by another npm package, esdoc. I would like to be able to keep this autogenerated dir and just make the react native packager ignore the dist/ dir.

Error Message:

[01/23/2017, 13:17:07] <START> Building Haste Map
    Failed to build DependencyGraph: @providesModule naming collision:
      Duplicate module name: ann
      Paths: /Users/thurt/projects/example/package.json collides with /Users/thurt/projects/example/dist/esdoc/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: ann
  Paths: /Users/thurt/projects/example/package.json collides with /Users/thurt/projects/example/dist/esdoc/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
    at p.getName.then.name (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)

Answer 1

The configuration for this has a habit of changing between RN versions. See below for version-specific instructions on creating a config file, loading the config file and clearing the cache.

For React Native >= 0.64 to 0.71(+?)

A rename of the helper function from blacklist to exclusionList was made in Metro 0.60, and the config entry blacklistRE -> blockList in Metro 0.61. These both landed in RN in 0.64.0.

In your project root create metro.config.js with the contents:

const exclusionList = require('metro-config/src/defaults/exclusionList');

// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.

module.exports = {
  resolver: {
    blockList: exclusionList([/dist\/.*/])
  }
};

For React Native >= 0.59, < 0.64

In your project root create metro.config.js with the contents:

const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

For React Native >= 0.57, < 0.59

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

For React Native >= 0.52, < 0.57

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro').createBlacklist;

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

For React Native >= 0.46, < 0.52.

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro-bundler').createBlacklist;

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

For React Native < 0.46.

In your project root create rn-cli.config.js with the contents:

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

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

All versions < 0.59

Have your CLI command use this config by passing the --config option:

react-native run-ios --config=rn-cli.config.js

(The config file should be automatically picked up by RN >= 0.59, ever since it was renamed metro.config.js)

All versions: Note on caching

Be aware that your blacklisted items may have already been included in the cache by the packager in which case the first time you run the packager with the blacklist you may need to reset the cache with --reset-cache

Answer 2

For Expo:

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = {
  ...config,
  resolver: {
    ...config.resolver,
    blockList: [config.resolver.blockList, /(\/amplify\/.*)$/],
  },
};