Metro: 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 [email protected]: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.

• [email protected]
• [email protected]
• tried with [email protected] 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": "./"
        }
    }
};