Haul: Module not found: Error: Can't resolve 'react-native' in ... (xyz module) when using symlinks

[dave-irvine]

Current Behaviour

Not sure if this is so much a bug with haul, or a request for haul config support, but, for example with react-native-vector-icons:

Add react-native-vector-icons from a local copy using npm link rather than npm install.
Use react-native-vector-icons in code somewhere.
Run haul.
Get errors about various modules that cannot be resolved, like 'react' and 'react-native'.

Expected Behavior

react-native-vector-icons is a compiled module, so webpack shouldn't be touching this.

No matter the combination I use in exclude rules, I cannot get webpack to ignore this module.

Haul Configuration (webpack.haul.js)

const path = require('path');

module.exports = ({platform}, defaults) => {
  const config = {
    ...defaults,
    entry: "./index.js"
  };

  config.module.rules.forEach(rule => {
    if (rule.test && rule.test.source.includes("js")) {
      rule.exclude = [
        rule.exclude,
        path.join(__dirname, "node_modules/react-native-vector-icons") // this exists due to npm link symlink
      ];
    }
  });
});

return config;

Your Environment

| software | version
| ---------------- | -------
| Haul | master

[zamotany]

This is not a Haul bug, it's more of a webpack thing.
Quick and easy workaround is to alias react and react-native to one place:

const path = require('path');

module.exports = ({platform}, defaults) => ({
  ...defaults,
  entry: "./index.js"
  /* ... */
  resolve: {
    ...defaults.resolve,
    alias: {
       ...defaults.resolve.alias,
      react: path.join(__dirname, 'node_modules/react'),
      'react-native': path.join(__dirname, 'node_modules/react-native'),
    }
  }
});

[dave-irvine]

Ah, great.

It might be good to put this info on a Recipes page or something, as doing an alias to resolve this is not a logical leap I would have made, I assumed the problem was that webpack was trying to transpile the modules even though I was trying to tell it to exclude them.

By making this work this enables developing a library of code that can be shared between multiple react native projects just by using symlinks, which afaik has never previously been possible with the default RN packager, so I think this should be presented as a use case for haul with specific instructions on how to achieve this.

Feel free to close this issue and maybe open another one about documenting as I have mentioned above.

[satya164]

Not sure if we should document it since it's not specific to Haul. If you're using Haul, you should be able to refer to Webpack documentation for tips and gotchas. It'll be nice if it is documented in Webpack docs and we can link to that in our README.

[sirajulm]

Adding symlinks false to the haul.config.js should fix the issue

'resolve': {
    symlinks: false
}

This is issue with webpack, but I'd suggest adding docs to haul on adding symlinks could be a good help.