React-native: Naming collision error when running packager, caused by "lodash" and "yeoman-generator"

[andreipt]

Description

In my project I am using "react-native": "0.36.0" and among the dependencies:

• "lodash": "^4.15.0"
• "yeoman-generator": "^0.24.1"

When using versions higher than "^3.10.1" for "lodash" and "0.21.2" for "yeoman-generator" I get naming collisions on "lodash", "inquirer" and "cli-width" when running packager.

Reproduction

Have the dependencies described above and run: react-native start --reset-cache
Result:

jest-haste-map: @providesModule naming collision:
  Duplicate module name: inquirer
  Paths: /CoolProject/node_modules/react-native/node_modules/yeoman-generator/node_modules/inquirer/package.json collides with /CoolProject/node_modules/react-native/node_modules/inquirer/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: lodash
  Paths: /CoolProject/node_modules/react-native/node_modules/lodash/package.json collides with /CoolProject/node_modules/react-native/node_modules/inquirer/node_modules/lodash/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: cli-width
  Paths: /CoolProject/node_modules/react-native/node_modules/yeoman-generator/node_modules/cli-width/package.json collides with /CoolProject/node_modules/react-native/node_modules/cli-width/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.

Solution

Using the same versions for "lodash" and "yeoman-generator" as the ones used in [email protected] (i.e. "^3.10.1" for "lodash" and "0.21.2" for "yeoman-generator") fixes the issue, but changing them is really not an option for me at the moment.
Is there any other possible fix?

Additional Information

• React Native version: 0.36.0
• Platform: both
• Operating System: MacOS

[lacker]

You are building a mobile app that depends on a different version of yeoman-generator? I am confused as to what exactly is happening. You create a new react native app, and then install specific versions of some other dependencies, and it breaks react native itself? In general ^3.x.x and ^4.x.x are not supposed to be compatible, is my understanding, so you do actually have to use versions of the dependencies which match package.json.

[andreipt]

@lacker To explain my problem more clearly think of it like this: My app has a dependency on react-native and another personal module, let's say named my-module. Each of them has a dependency on two different versions of yeoman-generator:

├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]

What I want to understand is if my-module was just another public node module and I had no access over it to change the version of it's yeoman-generator then I would not be able to use it in conjunction with react-native?

I have an Android dev background and there when we set our dependencies in Gradle we have the ability to exclude an internal dependency of a dependency if it doesn't match our needs. E.g.:

compile("com.facebook.react:react-native:+") {
  exclude group: 'com.android.support'
}

Do we have something similar for react?

[lacker]

It seems like npm should solve this - react and react native don't really manage their dependencies themselves, they are just libraries that you use according to npm. How did you install your own version of yeoman-generator, which npm version are you using?

[andreipt]

@lacker - I am using npm v3.10.8 and node v7.0.0.
In my-module I just have [email protected] among all the dependencies, nothing out of the ordinary:

"dependencies": {
    "chalk": "^1.1.3",
    "glob": "^7.0.5",
    "lodash": "^4.15.0",
    "yeoman-generator": "^0.24.1",
    "yosay": "^1.2.0"
  },

I am starting to think that this is more an npm issue rather than something related to react-native. I think it was just a coincidence that react-native was one of the modules involved in the "naming collision" error.
What do you think?

[lacker]

Yeah I agree I think this sounds like an npm problem. I'm gonna close this under that theory but if you do figure out that it's a React Native thing please feel free to reopen!

[andreipt]

Thanks @lacker! I will do as you suggested if I figure out that this issue has any connection to React Native.

[andreipt]

@lacker - After looking more closely I found that it is expected for npm to install different versions for different modules if that is requested by their package.json files. There is the npm dedupe command that tries to flatten the dependency structure, but that doesn't help in this case.

Looking through the node_modules folder I found that there are many sub-modules that are installed with different versions for different dependencies, but the react-native packager doesn't complain about them. The only ones that it doesn't like are the "lodash", "inquirer" and "cli-width".
The node modules seem to be installed correctly and the code that causes the error is the one that processes them, i.e. react-native packager.

As we can see in the initial logs I provided, the error is thrown by the jest-haste-map module: https://github.com/facebook/jest/blob/master/packages/jest-haste-map/src/index.js#L303
Could this bug be directly related to react-native-cli, and more exactly to jest-haste-map?

I created a test project where I have the following dependencies for both cases:
1) packager working correctly:

"dependencies": {
    "inquirer": "^0.12.0",
    "lodash": "^3.10.1",
    "yeoman-generator": "^0.21.2",
    "react": "15.3.1",
    "react-native": "0.36.0"
  },

2) packager throwing "naming collision error":

"dependencies": {
    "inquirer": "^0.10.1",
    "lodash": "^4.16.4",
    "yeoman-generator": "^0.24.1",
    "react": "15.3.1",
    "react-native": "0.36.0"
  },

but in both cases there are different versions of different nested modules installed, so I think we can exclude npm from the culprit list.

I don't have the right to reopen this issue. Could you do that please? Thanks!

[lacker]

OK, I am reopening. I am not sure if this is a known issue - maybe @cpojer can comment on whether this is expected behavior in some sense of "expected".

[cpojer]

What does your Jest config look like?

[andreipt]

@cpojer I don't have any config for Jest. The error is thrown by jest-haste-map when I run react-native start --reset-cache on a vanilla React Native project with the dependencies from my previous comment.

[cpojer]

Oh, this is inside of RNP (which also uses jest-haste-map). This is very odd and shouldn't be happening. Can you upload a repository on github that shows this issue?

[andreipt]

@cpojer Here is a vanilla React Native project where I only updated the package.json file to contain the dependencies (and versions) that are causing the issue: https://github.com/andreipt/VanillaReactNative
In the readme file you can find the dependency versions for which packager is running successfully.
Thanks!

[winterbe]

I'm facing similar issues after upgrading dependencies of my RN app.

Logs when starting the RN packager or jest:

jest-haste-map: @providesModule naming collision:
  Duplicate module name: babylon
  Paths: /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-traverse/node_modules/babylon/package.json collides with /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-core/node_modules/babylon/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: babel-runtime
  Paths: /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-traverse/node_modules/babel-runtime/package.json collides with /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-core/node_modules/babel-runtime/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: babel-runtime
  Paths: /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-types/node_modules/babel-runtime/package.json collides with /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-traverse/node_modules/babel-runtime/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: lodash
  Paths: /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-core/node_modules/lodash/package.json collides with /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-types/node_modules/lodash/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: lodash
  Paths: /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-traverse/node_modules/lodash/package.json collides with /Users/winterbe/Projects/PondusApp/node_modules/react-native/node_modules/babel-core/node_modules/lodash/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.

package.json:

  "jest": {
    "preset": "jest-react-native",
    "testResultsProcessor": "node_modules/jest-teamcity-reporter"
  },
  "devDependencies": {
    "babel-eslint": "7.1.1",
    "babel-jest": "17.0.2",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-preset-react-native": "1.9.0",
    "eslint": "3.11.1",
    "eslint-plugin-react": "6.8.0",
    "eslint-teamcity": "1.3.1",
    "jest": "17.0.3",
    "jest-react-native": "17.1.0",
    "jest-teamcity-reporter": "0.2.0",
    "react-test-renderer": "15.4.1"
  },
  "dependencies": {
    "filesize": "3.3.0",
    "lodash": "4.17.2",
    "mobx": "2.6.5",
    "mobx-logger": "0.3.1",
    "mobx-react": "4.0.3",
    "moment": "2.17.1",
    "react": "15.4.1",
    "react-native": "0.39.0",
    "react-native-vector-icons": "3.0.0",
    "streamjs": "1.6.4",
    "underscore.string": "3.3.4"
  }

[andreipt]

@cpojer Do you have any updates on the issue? Were you able to reproduce it using the repository I provided? Thanks!

[cpojer]

Would you mind upgrading to RN 0.39 or master to see if this issue still persists?

[alee8]

I have about 532 of the following messages for different modules:
jest-haste-map: @providesModule naming collision:
This warning is caused by a @providesModule declaration with the same name across two different files.

I don't use lodash or yeoman-generator.

This started appearing when I upgraded to latest React, RN, Jest, etc. as you can see in my package.json. @cpojer I am using 0.39.2 (the latest). Thought I should post this here after reading the thread and recommendations.

{
"name": "ExampleRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"flow": "flow; test $? -eq 0 -o $? -eq 2"
},
"dependencies": {
"invariant": "^2.2.2",
"react": "^15.4.1",
"react-addons-shallow-compare": "^15.4.1",
"react-native": "^0.39.2",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"whatwg-fetch": "^2.0.1"
},
"jest": {
"preset": "jest-react-native"
},
"devDependencies": {
"babel-jest": "^17.0.2",
"babel-preset-react-native": "^1.9.0",
"flow-bin": "^0.37.0",
"jest": "^17.0.3",
"jest-react-native": "^17.1.0",
"react-test-renderer": "^15.4.1"
}
}

[andreipt]

@cpojer I confirm that after upgrading react-native to 0.39 I am not seeing the naming collision errors anymore.
Do you know if the actual fix was the removal of yeoman from RN's dependencies? https://github.com/facebook/react-native/commit/1fd7a574ba538d05da4be841c84a70766464ec13
Thanks!

[MattyK14]

Upgrading a project to react-native 0.41.2 is giving me a bazillion of these errors

[lacker]

@MattyK14 I think it might be a similar symptom of a different problem. Would you mind opening a new issue? In particular it would be really useful to have a brief repro, for example if creating a new project with React Native Version X and upgrading to React Native Version Y doesn't work.

[MattyK14]

@lacker I did a rm -rf node_modules && npm install and it fixed it up.

[lacker]

I see. Yeah that works a lot! @mkonicek is working on improving this tooling so I think/hope that failure mode will be fixed soon.

[GetSource1234]

Upgrading project to react-native 0.42.0 still is giving a lot of naming collision. I did node_modules delete and reinstall, but this did not help.

[getreup]

On react-native 0.42.0 as well and seeing a bunch of these, for example:

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: minimist
  Paths: /Users/****/BitBucket/****/mobile/node_modules/react-native/node_modules/minimist/package.json collides with /Users/****/BitBucket/****/mobile/node_modules/react-native/node_modules/optimist/node_modules/minimist/package.json

Which seems to be internal to react-native.

[getreup]

Turns out after deleting node-modules and npm install a few times, these warnings went away. Not entirely sure that was what did it or not.

[MyTotoro]

:grep 'naming collision' temp.txt | wc -l 59

I am getting a huge number of these naming collisions - I just installed react-navigation and tried running react native run-android

{ "name": "MyProject", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "~15.4.1", "react-native": "0.42.3", "react-navigation": "^1.0.0-beta.7" }, "devDependencies": { "babel-jest": "19.0.0", "babel-preset-react-native": "1.9.1", "jest": "19.0.2", "react-test-renderer": "~15.4.1" }, "jest": { "preset": "react-native" } }

[andyhappy1]

I was getting this issue with an application where I install with "yarn install" , instead of npm install. I did npm install -g npm, sudo rm -rf node_modules, and ran npm install, ..npm deduped these files (yarn did not do any deduping)...and now i no longer get that error...perhaps that will help?

[hielfx]

Running yarn install && npm dedupe worked for me too (an alternative solution of @susanner23 's solution)