question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support npm/yarn linking

See original GitHub issue

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:

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:36
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

22reactions
iddancommented, Nov 28, 2017

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

2reactions
aleclarsoncommented, Jan 31, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

yarn link
This command is run in the package folder you'd like to consume. For example if you are working on react and would like...
Read more >
npm-link
Package linking is a two-step process. First, npm link in a package folder with no arguments will create a symlink in the global...
Read more >
The solution for a working npm/yarn link | by Mattia Franchetto
The problem is the way linking is done: npm/yarn use symbolic links to connect packages, duplicating dependencies that cannot be deduped since ...
Read more >
How To Install and Use the Yarn Package Manager for Node.js
The Yarn maintainers recommend installing Yarn globally by using the NPM package manager, which is included by default with all Node.js ...
Read more >
What does "Linking Dependencies" during npm / yarn install ...
Linking: Finally, Yarn links everything together by copying all the files needed from the global cache into the local node_modules directory ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found