Source Javascript files required from outside of root directory -- are not found

[vladp]

This is a question on how to configure metro.config.js to allow to include source files

My index.android.js has

import { functionX} from './../rn.common/src/js.app/SomeFunctionsThatUseRN'

The above, unfortunately causes an error.

My metro.config.js

const path = require('path');

let allModules =new Proxy({}, {
      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
});

allModules['rnjs_common']=path.resolve(__dirname,"../rn.common/src/js.app");

module.exports = {
    resolver: {
    extraNodeModules: allModules
  },    
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "../rn.common/src/js.app"), 
  ]
};

The question is very similar to this open issue
#7 (comment)
But in there folks are trying to add custom node_modules from a non-root folder.
And in my case I need to be able to include non node_modules source file.

It seems that some form of an include option is missing from the resolver config in Metro
Is that possible to do with current version of Metro ?

Previously, it seemed it was possible by providing multiple directories to
'getProjectRoot' (as noted here ) in rn-cli.config.js
But that's no longer supported, and I could not find any alternatives/migrations.

Thank you
Environment

Metro: 0.54.1
React Native: 0.60.5
System:
OS: Windows 10
Binaries:
Node: 12.8.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.6.0 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.5.0 - C:\Program Files\nodejs\npm.CMD

[sis-dk]

Found any solution for this?

[vladp]

Nope, did not find a solution.
Seems to be not solvable.

It seems that new versions of Metro do not have functionality similar to the older getProjectRoot, that allow to include JS files outside of node modules directory.

[mamaz]

I have the same issue importing image assets on Android outside root folder, it works on iOS though.

RN: 0.59.9

[yeegr]

I'm on RN 0.61.2, still unable to include files outside of the project folder. I've tried the following edits with metro.config.js, neither one works

module.exports = {
  projectRoot: './',
  watchFolders: [
    '../common'
  ]
}

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['ts', 'tsx', 'js']
  },
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, '../common')
  ]
}

this completely breaks my folder structure, as /common houses constants and pure functions that could be reused by both the server and client.

need this fixed soon.

[vladp]

Would very much appreciate if anybody at the project team (@cpojer )

Without this capability, it is impossible to share JS directories across React and React-native apps and have a separate node_modules for each of the projects.

The only other solution is to remove our current directory structures for common components, and re-implement the shared components as node modules, but for various reasons this is just incredibly time consuming work that we cannot take on.

[kwasimensah]

https://github.com/facebook/metro/blame/master/packages/metro-resolver/src/resolve.js#L100 This is happening because originModulePath won't point to the node_modules of the react native project. i.e. ./src/../../common/foo.js won't let this logic find ./node_modules. This should probably be using projectRoot. I think this can be solved with a custom resolveRequest but I have to make sure.