0

I have a project folder which contains both Web and Mobile application developed on React and React-native, There is a dependency for web which adds SymLink in the postinstall script, The problem I am facing is React-native Packager server also picks up that symlink and App doesnt work correctly. At first I followed this- how to make react native packager ignore certain directories but getBlacklistRE silently ignores whatever Regex I am passing.

EDIT This is the actual issue I am facing and I have tried implemented all the solutions mentioned there but no success yet. - https://github.com/facebook/react-native/issues/19763

EDIT2 Now seems to me blacklisting not working and it could also happen due to clashes between the babel version I am using in web and that of React Native below is my package.json enter image description here

sunny
  • 1,156
  • 8
  • 15

1 Answers1

0

You mention trying blacklist with no luck. I don't have a web and react native project side by side but I do have a web project nested inside my react native project so this may be of some help. The blacklist does work for me and this is how it is implemented.

In rn-cli.config.js

const blacklist = require('metro/src/blacklist');

module.exports = {
  getTransformModulePath() {
    return require.resolve('./customTransformer'); // More on this below
  },

  getBlacklistRE() {
    return blacklist([
      /apps\/.*/,
    ]);
  },
};

I have a directory called apps/ in the root of my project. Inside apps/ I have the equivalent of React Native's UI Explorer (a nested React Native app) and web documentation (React web app). By blacklisting this directory the react native packager at the root of my project won't load those node modules, otherwise there is unwanted collision.

The customTransformer may not be of direct help here but I include it incase it lends a hand to your situation. I use it to replace local mock data files with an empty object so that my final builds have mocked data stripped. There may be a way this helps your project out if you're not aware of it.

// Note transformer was renamed to reactNativeTransformer effective in RN 0.56.x
const upstreamTransformer = require('metro/src/reactNativeTransformer');

module.exports.transform = function (input) {
  const { filename, options, src } = input;
  let newSrc = src;
  if (filename.indexOf('mocks') > -1 && !options.dev) {
    newSrc = 'module.exports = {}';
  }
  return upstreamTransformer.transform({ src: newSrc, filename, options });
};
Steven
  • 1,670
  • 4
  • 17
  • 26
  • Thanks Steve, although I am seeing this error `Cannot find module 'metro/src/transformer'`. My metro version is "0.38.1" and react-native version is "0.56", I checked the metro module and I see a lot of transformer files though by different names, is it JSTransformer? – sunny Jul 17 '18 at 16:44
  • Ah I'm on RN 0.55 but seeing the same error trying to upgrade to 0.56. – Steven Jul 24 '18 at 17:38
  • We were metro 0.30.2 on RN 0.55 – Steven Jul 24 '18 at 17:59
  • 1
    `transformer` was renamed to `reactNativeTransformer` [in metro 0.42.2](https://github.com/facebook/metro/commit/838a9eb75d78a12d51edb8539859c71315ca1cae) – Steven Jul 24 '18 at 18:07