Modules required from outside of root directory does not find node_modules

Hi! I hope I post this in the right place, sorry if I’m not.

I’m trying to setup requiring files outside of the root project directory, as I’m building both a web app and a native app that’ll share some code. I’ve configured this using rn-cli.config.js, and I can successfully import my shared files from outside of my root.

However, the files imported from outside of the root does not find any modules from node_modules (React for example). Files required from inside of the project root does find them (which I guess is because node_modules is in a parent directory to them). I just get a Cannot resolve module 'React'.

The folder structure looks like this:

common
- components
- - ....code
web
- node_modules
- ....code
native
- node_modules
- ...code, rn-cli.config.js, etc...

rn-cli.config.js:

const path = require('path');

module.exports = {
  getProjectRoots() {
    return [
      path.resolve(__dirname, '../common'),
      path.resolve(__dirname, 'node_modules'),
      path.resolve('.')
    ]
  }
};

If I add a package.json to common and install react there it works. So I guess this has to do with the packager walking the file upwards and not finding node_modules as it’s in a sibling directory and not a parent directory?

Am I missing something obvious here? I’ve tried clearing the cache etc. I’m on the latest Expo which I’m pretty sure uses RN 0.43.

Thanks in advance!

[fiznool]

I’m seeing the same thing too @Edmond-XavierCollot - thank you @denwakeup for the fix. Here’s an updated metro.config.js file that should be used for RN 0.59+.

const path = require('path');

module.exports = {
  /**
   * Ensure any imports inside the shared 'components' folder resolve to the local node_modules folder
   */
  resolver: {
    extraNodeModules: new Proxy({}, {
      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
    }),
  },
 /**
   * Add our workspace roots so that react native can find the source code for the included packages
   * in the monorepo
   */
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "../../components"),
    path.resolve(__dirname, "../../node_modules")
  ]
}

[fiznool]

We actually ended up adding nohoist: ['**'] to our react-native yarn workspace because it was easier than figuring out which needed to be where.

I came to the same conclusion too! Yes I end up with a larger workspace but the benefits of not having to hunt these things down far outweigh the cons of a larger workspace size.

As mentioned above, for RN 0.57 you have to put your extraNodeModules inside a resolver object in your rn-cli.config.js, and also getProjectRoots() is no longer a thing. The example provided above would be rewritten as follows for RN 0.57+:

module.exports = {
  /**
   * Add "global" dependencies for our RN project here so that our local components can resolve their
   * dependencies correctly
   */
  resolver: {
    extraNodeModules: {
      react: path.resolve(__dirname, "node_modules/react"),
      "react-native": path.resolve(__dirname, "node_modules/react-native"),
      "@storybook": path.resolve(__dirname, "node_modules/@storybook")
    }
  },
 /**
   * Add our workspace roots so that react native can find the source code for the included packages
   * in the monorepo
   */
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "../../components"),
    path.resolve(__dirname, "../../node_modules")
  ]
}