Duplicate fbjs dependencies leading to "Error: Naming collision detected"

[corbt]

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 (Naming collision: flux/node_modules/fbjs/flow/include/ErrorUtils.js #5390 (comment))

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?

[corbt]

According to facebook/fbjs#97 (comment) having multiple copies of fbjs in a React Native project will be supported in 0.19. 👍

[gre]

great news :)

[ide]

It'll probably be 0.20 since the patches haven't landed yet but yes support is coming.

[atc3]

I've had this issue before with facebook's flux library.

Before this fix comes out, you can either update every dependency you have so they're on the same version of fbjs, or downgrade your dependencies to when they didn't use fbjs yet (for flux this was 2.0.1)

Hope this helps

[jrichardlai]

For people that are still facing this issue, a temporary can be to add fbjs as a dependency in your package.json, and then run a script in postinstall to remove the extra fbjs https://gist.github.com/jrichardlai/a6a36352e1b98eb2946a

[sharathprabhal]

@jrichardlai 's suggestion solved it!

[lrettig]

Ran into this just now upgrading RN 0.17.0 -> 0.18.1. In case it helps anyone else, here's the error I got:

Error building DependencyGraph:
 Error: Naming collision detected: /Users/rettig/wip/breeze-react-native/Breeze/node_modules/fbemitter/node_modules/fbjs/lib/warning.js collides with /Users/rettig/wip/breeze-react-native/Breeze/node_modules/react-native/node_modules/fbjs/lib/warning.js
    at HasteMap._updateHasteMap (HasteMap.js:132:13)
    at HasteMap.js:103:28
    at tryCallOne (/Users/rettig/wip/breeze-react-native/Breeze/node_modules/promise/lib/core.js:37:12)
    at /Users/rettig/wip/breeze-react-native/Breeze/node_modules/promise/lib/core.js:123:15
    at flush (/Users/rettig/wip/breeze-react-native/Breeze/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:428:9)
    at process._tickCallback (node.js:357:13)

And here's what fixed it:

1. rm -rf node_modules/
2. npm i fbjs
3. npm i
4. npm i fbjs (once more for good measure?) -- at this point I was still getting the error.
5. find . -name 'fbjs' -print and delete all but the top-level fbjs, in my case just one, ./node_modules/flux/node_modules/fbjs
6. rm -rf $TMPDIR/react-*
7. watchman watch-del-all
8. npm cache clean

I'm guessing some of these steps may be extraneous and order may not matter, but in any case this got me going again.

Thanks.

[3LP]

jrichardlai YOU DAHH MANN

[joewood]

Note - fbjs@0.6.0 may be needed as latest fbjs doesn't export the necessary modules. As per facebook/fbjs#95. I guess this will soon all be sorted out and these hacks won't be required.

Also, rather than removing files I used a project rn-cli.config.js that adds the fbjs paths to the blacklist.

[sonu27]

@lrettig I used npm i fbjs@0.6.1 on react 0.19
I'm using the latest node and npm (version 3.6)

[sjmueller]

@ide do you know if this landed in 0.20-rc? I didn't see a mention in the release notes.

[sjmueller]

Ok I tried to upgrade, but unfortunately I'm saddened to report that Error: Naming collision detected is still occurring with 0.20.0-rc1

[ide]

The fix (#5084) is still pending (some internal FB issues).

[iTonyYo]

Check here to solve this issue. 👏👍😃

[maarekj]

@iTonyYo This not work at me.

[cbrevik]

I have tried again with 0.21-rc, still not working. It's been breaking every release since 0.18 for me.

Right now I have a naming collision between node_modules/fbjs/flow/include/CSSCore.js and node_modules/fbjs/lib/CSSCore.js. None of the proposed workarounds has been successful on my project.

[chrisbianca]

I battled with this for a long time, and finally got it working by doing the folowing:

1. Adding fbjs (version 0.6.1) as a separate dependency in my package.json
2. Adding an exclude to my rn-cli.config.js file, so that the file looks roughly as follows:

'use strict';

const blacklist = require('react-native/packager/blacklist');

var blacklist = [
  /{root folder name}\/node_modules\/.+\/node_modules\/fbjs\/.*/
]

module.exports = {
  getBlacklistRE() {
    return blacklist('', blacklist);
  },
};

For those that don't already have an rn-cli.config.js file, this lives in the root directory, alongside the index.ios.js and index.android.js files.

[maarekj]

I resolved it by updating fbemitter 0.9.1 to 0.9.2

[bccblabs]

npm ddp fixed the issue for me

[ide]

This should be fixed in 0.22-rc (#5084).