react-native: Duplicate fbjs dependencies leading to "Error: Naming collision detected"

This issue has been reported in #5180, #5357, #6164, #5390 and #5412 (so it’s a pretty visible one!). Consolidating here to have a place to discuss solutions.

The Issue

Errors are of the following form (although the exact file that collides isn’t always the same):

Error building DependencyGraph:
Error: Naming collision detected: /Users/rreusser/project-name/node_modules/react-native/node_modules/react/lib/AutoFocusUtils.js collides with /Users/rreusser/project-name/node_modules/react/lib/AutoFocusUtils.js

It appears the problem is with the packager, which globally resolves @providesModule annotations, vs npm, which can install different versions of the same module at different points in the tree, leading to collisions. A lot of people are running into this now that react-native depends on react, which both depend on fbjs. It has also been reported with other Facebook dependencies including flux and fbemitter.

Current Workarounds

  1. Delete node_modules, upgrade to npm@3, and reinstall everything. npm@3 makes an effort to dedupe dependencies if the accepted versions overlap.
  2. Delete node_modules, install fbjs as a top-level dependency and manually delete all nested fbjs instances (https://github.com/facebook/react-native/issues/5390#issuecomment-172679236)

I think option 1 is cleaner, and we should update the docs to recommend npm@3 unless we find a better short-term solution to this issue.

Possible Solutions

  1. It appears there’s a file packager/blacklist.js, maybe this could be used to ignore the conflicting react/fbjs dependencies.
  2. I don’t know how much ‘react-native’ depends on fbjs, but if it isn’t in many places it could be removed entirely.
  3. fbjs could strip its @providesModule annotations in the version pushed publicly on npm and rely on relative require statements. Long-term I see this as being a more stable solution, because npm’s nested dependencies will never play nicely with a parallel global system. I suspect we’ll keep seeing issues about this pop up whenever someone includes two Facebook projects with different fbjs versions. But, this solution is probably impossible because of how widely used fbjs is with Facebook.

Other options?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 20 (11 by maintainers)

Most upvoted comments

This should be fixed in 0.22-rc (https://github.com/facebook/react-native/pull/5084).