Support npm/yarn linking

[skovhus]

Do you want to request a feature or report a bug?
Feature/Bug

What is the current behavior?
When building a react-native module, it is currently widely used to have an Example project with a relative reference (file:../ in package.json) to the main package/module. It has the advantage that local development is easier.

But the module resolution isn't supporting linked modules or modules that are defined as being relative using file:../ in a package.json.

Examples:

• https://github.com/lwansbrough/react-native-camera/blob/master/Example/package.json
• https://github.com/react-native-community/react-native-linear-gradient/tree/master/Examples/AnimatedGradient

The two projects mentioned above isn't currently working as the bundler isn't supporting the file:../ reference. It fails with a:

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 650): UnableToResolveError: Unable to resolve module react from /Users/kenneth/git/react-native-camera/index.js

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

• git clone git@github.com:lwansbrough/react-native-camera.git
• cd react-native-camera/Example && npm install
• node node_modules/react-native/local-cli/cli.js start
• see that the bundler fails by visiting http://localhost:8081/index.android.bundle

What is the expected behavior?
Similar to webpack resolve.fallback I would like the bundler to support this. See http://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies

Would it make sense to have this as a fallback searchQueue? Something like this in the resolver:

    const fallbackSearchPath = path.join(process.cwd(), 'node_modules');
    if (this._dirExists(fallbackSearchPath)) {
      // add module of current working directory as fallback
      searchQueue.push(path.join(fallbackSearchPath, realModuleName))
    }

The alternative for me right now is to have a rn-cli-config.js similar to this:

const path = require('path');

// As the metro bundler does not support linking correctly, we add additional
// search path queries to all modules.
const extraNodeModulesGetter = {
  get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
};

module.exports = {
  extraNodeModules: new Proxy({}, extraNodeModulesGetter),
};

Please provide your exact metro-bundler configuration and mention your metro-bundler, node, yarn/npm version and operating system.

• npm@5.3.0
• node@8.6.0
• tried with react-native@0.44.3 but also newer versions.

[iddan]

This is a major issue for react native OSS package maintainers as it is very hard to test the code in example projects

[skovhus]

@iddan agree. But note that there is a workaround (see my rn-cli-config.js file).

[bugs181]

Just ran into this issue myself. Only my error was slightly different. Glad Google brought me here.

On iOS screen:

Metro Bundler has encountered an internal error, please check your terminal error output for more details

Terminal:

[20:58:54] undefined
[20:58:54] Failed building JavaScript bundle.

Setup:

"expo": "^29.0.0",
"react": "16.3.1",

However just prior to this I did npm link moduleName

[aleclarson]

Symlink support is being tracked in #1. See this comment, specifically.

[hosseinalipour]

I tried the rn-cli-config.js but it didn't work

[pavlos256]

I tried the rn-cli-config.js but it didn't work

For anyone else reading this, rn-cli-config.js has been renamed to metro.config.js and here's the relevant section.

Sample metro.config.js to look for mymodule in ./mymodule:

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true
            }
        })
    },
    resolver: {
        extraNodeModules: {
            "mymodule": "./"
        }
    }
};

[Roopbasant007]

I found a kind of bug while installing some packages related to yarn in our system if the user name is space separate string. for example, the user name is Roop Basant. It throws an error that the user is not found.

[jmatsushita]

I think this is now supported with the Stable Symlink Support announced from react native 0.73 https://reactnative.dev/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#stable-symlink-support-in-metro and #1 having been closed?

Note the following instructions adapted from this comment:

• Prior to metro 79.0 you need the unstable_enableSymlinks in your metro.config.js
• You also must have any targets of any symlinks covered by the watchFolders section of the config also.
• In my case relative paths were not working, but absolute paths seemed to do the trick.

const config = {
   watchFolders: [
        '/Users/c/Documents/foodir/ms',
    ],
    resolver: {
       unstable_enableSymlinks: true
    }
};