Naming collision: flux/node_modules/fbjs/flow/include/ErrorUtils.js

[davidLeonardi]

Hello,

After upgrading to 0.18.0 and rebuilding my project from scratch (Deleting all files, generating a new project via react-native init, redowloading only source from version control, recreating the node_modules folder from scratch) i get this:

Error building DependencyGraph:
Error: Naming collision detected: /Users/d/Desktop/project/node_modules/flux/node_modules/fbjs/flow/include/ErrorUtils.js collides with /Users/d/Desktop/project/node_modules/react-native/Libraries/Utilities/ErrorUtils.js

My environment:
npm 3.5.1
node v4.1.1
lastest react-native-cli tools
OSX

My package.json's dependencies:
"fbemitter": "^2.0.0",
"flux": "^2.1.1",
"react-native": "0.18.0",
"react-native-swipeout": "^2.0.11",
"react-mixin": "^3.0.0",
"gb-native-router": "^0.6.0",
"react-native-item-cell": "^1.3.0",
"react-native-linear-gradient": "v1.3.0"

[facebook-github-bot]

Hey sethx, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[chirag04]

@SEthX npm3 is not officially recommended yet. Till then can you try removing fbjs from any nested dep and installing it under ./node_modules/fbjs

Here are few steps for anyone else having the same problem:

1. rm -rf node_modules
2. npm install
3. npm install fbjs
4. find . -name 'fbjs' -print
5. manually remove all fbjs inside any node_module except one at top level
6. rm -fr $TMPDIR/react-*
7. watchman watch-del-all
8. npm start --reset-cache

[lesniakania]

I had similar issue, for me helped upgrading to Node 5.0.2 and npm 3.3.12

[jasonmerino]

I had a similar issue with naming collisions in fbjs, but in different files. The steps that @chirag04 posted fixed it for me.

[adriansdev]

I had a fbjs camelize.js clash but the @chirag04 instructions plus restarting xcode and the iOS simulator to completely clear caches

[dabit3]

@chirag04 fix worked for me as well, thanks!

[sampurcell93]

This fix worked great, thank you.

[joewood]

The fix didn't work for me. The fbjs in npm is different to the ones used by react-native. The version of lib/invariant.js in the package now doesn't have providesModule invariant - this is causing build failures. If you install fbjs@0.6.0 this solves the issue.

[alex-mcleod]

As an extension to the answer by @chirag04, you can add a npm post install script with this line to automatically take care of the problem whenever npm install is run:

find ./node_modules -name "fbjs" -type d -prune -exec sh -c 'if [ {} != "./node_modules/fbjs" ]; then rm -rf {};fi' \;

[joewood]

I found it easier to just tell the packager to ignore all versions of fbjs other than the one you install. So, install your version of fbjs (I found v.0.6 to only work):

npm install fbjs@0.6.0

And then create a rn-cli.config.js file in your root. This worked for me:

var blacklist= require("react-native/packager/blacklist");
var config = {
    getBlacklistRE(platform) {
        return blacklist(platform,[/MYAPPNAME.+\/node_modules\/fbjs.*/]);
    }
}
module.exports = config;

Replacing MYAPPNAME with your app's directory name (remember to escape out any regex chars, like-). All this is doing is adding to the package blacklist regex pattern. The .+ ensures that there must be more than one character between the root dir and the node_modules.

[jihopark]

@joewood's solution worked for me. thanks!

[BigPun86]

@chirag04 solution worked for me (Node v5.5.0 & npm 3.3.12 & RN18)

[ghamaide]

I'm having the same issue and after doing the steeps above I have this error...
Error: Naming collision detected: /Users/gregoirehamaide/Documents/NeedlIOS/node_modules/fbjs/flow/include/warning.js collides with /Users/gregoirehamaide/Documents/NeedlIOS/node_modules/fbjs/lib/warning.js

Any thoughts ?

[joewood]

@ghamaide which version of fbjs did you install? This error looks like a conflict within fbjs and its local flow install. Try fbjs@0.6.0

[arianitu]

@joewood What exactly is MYAPPNAME? Is this the name in package.json?

[joewood]

Just the root directory of your app. The blacklist logic in the packager is matching the full pathname, so it includes your root dir.

[arianitu]

That seems to fix the conflict issue when the packager is running, but I get errors when my app actually runs. The error I get is:

Unable to resolve module invariant from /Users/auka/Development/personal/secret/client/node_modules/react-native/Libraries/ReactIOS/NativeMethodsMixin.js: Invalid directory /Users/node_modules/invariant

I have installed fbjs@0.6.0, cat /Users/auka/Development/personal/secret/client/node_modules/fbjs/package.json returns 0.60.

I'm using npm version 2.14.7 and node v4.2.0 and react-native 0.19.0

If I do npm install invariant, I end up getting:
Unable to resolve module keyMirror from /Users/auka/Development/personal/secret/client/node_modules/react-native/Libraries/Utilities/MessageQueue.js: Invalid directory /Users/node_modules/keyMirror

I haven't found a way to fix the conflicts between fbjs in flux and react-native, got any other ideas?

[arianitu]

@joewood what version of NPM are you using?

[joewood]

I'm on npm 2.14.16, node 4.2.3 and RN 0.18.1
Can you check that your local fbjs is providing invariant? What does this produce:

grep "providesModule invariant" node_modules/fbjs/**/*.js

You may need to package with a --resetCache and clear down the packager temp files.

[digitalmaster]

@joewood Thanks.. worked for me! #twoDaysTryingToFigureThisOut

[Durgaprasad-Budhwani]

@alex-mcleod solution worked for me. Thanks

[andreacab]

Neither of the provided solutions worked for me.

I am on npm 3.3.12 and node 5.3.0

grep "providesModule invariant" node_modules/fbjs/**/*.js returns
node_modules/fbjs/lib/invariant.js: * @providesModule invariant

npm list fbjs returns

├── fbjs@0.6.0  extraneous
├─┬ flux@2.1.1
│ └─┬ fbemitter@2.0.2
│   └── fbjs@0.7.2 
├─┬ react@0.14.7
│ └── fbjs@0.6.1 
└─┬ react-native@0.20.0
  └── fbjs@0.6.1

error is Failed to build DependencyGraph: Naming collision detected: /Users/KAB/Desktop/Development/snofolio2/src/main/webapp/node_modules/flux/node_modules/fbjs/lib/TouchEventUtils.js collides with /Users/KAB/Desktop/Development/snofolio2/src/main/webapp/node_modules/fbjs/lib/TouchEventUtils.js

Any ideas ?
Thanks

[pedrodevoto]

@joewood the blacklist worked for me!

[SamTharani]

I also faced this issue but in different file

Failed to build DependencyGraph: Naming collision detected: /home/samantha/Projects/prepaid-portal/m1-prepaid-portal-web/node_modules/fbjs/flow/include/fetch.js collides with /home/samantha/Projects/prepaid-portal/m1-prepaid-portal-web/node_modules/react-native/Libraries/Fetch/fetch.js
Error: Naming collision detected: /home/samantha/Projects/prepaid-portal/m1-prepaid-portal-web/node_modules/fbjs/flow/include/fetch.js collides with /home/samantha/Projects/prepaid-portal/m1-prepaid-portal-web/node_modules/react-native/Libraries/Fetch/fetch.js

[liesislukas]

having this issue with RN v0.20

[davidLeonardi]

My solution is always to delete the:
node_modules/flux/node_modules/fbjs folder . Works time after time.

On Sat, Feb 27, 2016 at 4:25 PM Lukas Liesis notifications@github.com
wrote:

having this issue with RN v0.20

—
Reply to this email directly or view it on GitHub
#5390 (comment)
.

[BigPun86]

+1 to @SEthX. Works for me as well. It is weird that i always get this issue as soon as i install anything with npm. After that just delete the mentioned folder and everything should be fine

[liesislukas]

@BigPun86 folder appears again because npm installs it again. That's why it's bad solution. You should not touch anything inside node_modules folder.

[cherniv]

I have a mix of this bug and flux and #4968 , and my workaround for now is:

npm uninstall --save flux
rm -rf node_modules && npm install
npm install --save flux
rm -rf node_modules/fbemitter/package.json
rm -rf node_modules/flux/node_modules/fbjs/
rm -rf node_modules/flux/package.json 

[silent-tan]

@joewood 's solutions worked

[digitalmaster]

tried a million things.. installing npm install fbjs@0.6.0 finally did it

[rclai]

Solution that worked for me as of 0.21.0:

rm -rf node_modules
npm i
npm i fbjs@0.6.0
find ./node_modules -name "fbjs" -type d -prune -exec sh -c 'if [ {} != "./node_modules/fbjs" ]; then rm -rf {};fi' \;
rm -fr $TMPDIR/react-*
watchman watch-del-all
npm start --reset-cache

[YashYash]

@chirag04 && @joewood all i can say is thank you