How to exclude node_modules from another project, while still using JS components from there

Question

---

UPDATE: I cannot reproduce the problem anymore for some reason, but cannot close the question. Leaving updated config details for others.

I have 2 projects, one for React Native, the other for React. A source file from React Web Project ( say rp1.js) is using a source file mycommonrn.js (component) from React Native project.
The issue is that the mycommonrn.js file is using an NPM module (react-native-vector-icons). And I have that module separately installed in both:

• (a) in node_modules under React Native project

• (b) in node_modules under React project.

When mycommonrn.js is used from React Web project, I need to have that NPM module to be pulled from node_modules in ( b ) . But this is not happening, instead somehow it is being pulled from ( a ).

The import statement causing the problem is in mycommonrn.js

import Ionicons from 'react-native-vector-icons/dist/Ionicons';

I am trying to instruct webpack babel-loader to NOT look at node_modules in react-native project.. But it is not working...

My application using Create React App setup with rewire, to override the directory jail imposed by CRA.

My configuration is below, you can see that I am explicitly telling the babel-loader to 'exclude' the node_modules directory that's giving me trouble (marked with ** for easy of readability ).

That explicitly exclusion is not working for some reason. (CRA setups do not use .babelrc -- which is why I am not posting that in the question).

Appreciate in advance any help.

     └─ 1
│        └─ oneOf
│           ├─ 0
│           │  ├─ test
│           │  │  ├─ 0
│           │  │  ├─ 1
│           │  │  ├─ 2
│           │  │  └─ 3
│           │  ├─ loader: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/url-loader/index.js
│           │  └─ options
│           │     ├─ limit: 10000
│           │     └─ name: static/media/[name].[hash:8].[ext]
│           ├─ 1
│           │  ├─ test
│           │  ├─ include
│           │  │  ├─ 0: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/src
│           │  │  ├─ 1: /home/v/devel/mine/ltproject/mob/rn.common/src/js.app
│           │  │  ├─ 2: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/app.src
│           │  │  ├─ 3: /home/v/devel/mine/ltproject/mob/rnweb/web.common/wc.src
│           │  │  └─ 4: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/react-native-vector-icons
│           │  ├─ loader: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/babel-loader/lib/index.js
│           │  ├─ options
│           │  │  ├─ babelrc: false
│           │  │  ├─ presets
│           │  │  │  └─ 0: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/babel-preset-react-app/index.js
│           │  │  └─ cacheDirectory: true
│           │  └─ **exclude: /home/v/devel/mine/ltproject/mob/rn.common/node_modules**

config-overides.js injected via rewire (that slightly changes create react app webpack)

/* adds and slightly overwrites
   React Create App webpack
*/

const path = require('path');
const resolve=path.resolve;
const fs=require('fs'); 
const paths= require ('react-scripts/config/paths');

const wpmerge= require('webpack-merge');
var treeify = require('treeify');

module.exports = {

  webpack: function(baseConfig, env) {

    const config = Object.assign({}, baseConfig);


    config.resolve.alias.web_common = path.resolve('./src/wc.src');
     config.resolve.alias.app_src = path.resolve('./src/app.src');
    config.resolve.alias.rnjs_common = path.resolve('./src/js.app');


    /* get rid of facebooks plugin that causes error if something
       outside of the src folder...

       There SEEMS to be ONLY 1 plugin there,
       so insteading of removing by index, I am resetting
       array therefore there are should be NO resolve plugins
       in my webpack config
    */
    config.resolve.plugins=[];




    //find existing js formater rule
    let jsRulesJSFormaterIdx = -1;
    jsRulesJSFormaterIdx=config.module.rules.findIndex(
      (rule) =>{
        if (rule.test // rule.test is a reg expr 
            && rule.test.exec
            && rule.test.exec('./something.js')) {
          return true;
        }
      }
    );



    let oneOfIdx=1;
    let jsRulesBabelLoaderIdx = -1;
    jsRulesBabelLoaderIdx=config.module.rules[oneOfIdx].oneOf.findIndex(
      (rule) =>{
        if (rule.test // rule.test is a reg expr 
            && rule.test.exec
            && rule.test.exec('./something.js')) {
          return true;
        }
      }
    );

    const pathsToMySourcesArr=
      [paths.appSrc,
       fs.realpathSync(paths.appSrc+'/js.app'),
       fs.realpathSync(paths.appSrc+'/app.src'),
       fs.realpathSync(paths.appSrc+'/wc.src'),
       fs.realpathSync(paths.appNodeModules+'/react-native-vector-icons')
      ];

    /* various contraptions on how to exclude a particular node module path
      (I cannot get it work...)
     the include part works
     https://github.com/webpack/webpack/issues/2031
    */

    console.log(paths);

    let addtlIncludeConfig={
      include:pathsToMySourcesArr,
      /* EXCLUDE BELOW DOES NOT HELP TO EXCLUDE RN node_modules */
      exclude: fs.realpathSync(paths.appPath+'../../../../rn.common/node_modules/')
    };


    config.module
      .rules[oneOfIdx].oneOf[jsRulesBabelLoaderIdx]=
      wpmerge( config.module.rules[oneOfIdx].oneOf[jsRulesBabelLoaderIdx],
               addtlIncludeConfig);

    config.module
          .rules[jsRulesJSFormaterIdx]
          .include=pathsToMySourcesArr;


    console.log("config-overrides: the result config: ",
                treeify.asTree(config,true,false));

    return config;
  },


  }
}