Error Building DependencyGraph: Error: Naming Collision Detected

- 1 answer

I'm running very simple code using react-native-tableview

'use strict';

var React = require('react-native');
var { AppRegistry } = React;
var TableView = require('react-native-tableview');
var Section = TableView.Section;
var Item = TableView.Item;

class AwesomeProject extends React.Component {
        return (
            <TableView style={{flex:1}}
                       onPress={(event) => console.log(event)}>
                <Section label="Section 1" arrow={true}>
                    <Item value="1" detail="Detail1" >Item 1</Item>
                    <Item value="2">Item 2</Item>
                <Section label="Section 2" arrow={false}>
                    <Item selected={true}>Item 1</Item>
                    <Item>Item 2</Item>
                    <Item>Item 3</Item>

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);


"dependencies": {
  "react-native": "^0.17.0",
  "react-native-navbar": "^1.1.6",
  "react-native-router": "^0.2.1",
  "react-native-tableview": "^1.4.6"

And I get the error:

Error building DependencyGraph:
 Error: Naming collision detected: /Users/sandbox/native/test/AwesomeProject/node_modules/react-native-router/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/String.prototype.es6.js collides with /Users/sandbox/native/test/AwesomeProject/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/String.prototype.es6.js
    at HasteMap._updateHasteMap (HasteMap.js:123:13)
    at HasteMap.js:94:28
    at tryCallOne (/Users/sandbox/native/test/AwesomeProject/node_modules/promise/lib/core.js:37:12)
    at /Users/sandbox/native/test/AwesomeProject/node_modules/promise/lib/core.js:123:15
    at flush (/Users/sandbox/native/test/AwesomeProject/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:417:9)
    at process._tickCallback (node.js:346:13)

I noticed that much people come across with this problem, but still there is no clear solution which library is guilty and how to avoid it.



The error indicates there are two copies of String.prototype.es6.js and the packager isn't able to ignore one of them and thus you are receiving the error.

Are you using npm2 or npm3? As a workaround, npm3 will flatten the dependencies which should allow you to move forward by de-duping react (assuming you ensure they are both pointed at the same version).

You can either install npm3 as a separate global package and then run npm3 install or you can upgrade your entire npm package via npm install -g [email protected]. Also, make sure you remove the contents of your node_modules directory before re-installing your npm packages should you choose to upgrade.

There are pros and cons with this approach and react-native might include React as a peer dependency down the road which may mitigate this issue. It doesn't seem like react-native-router necessarily needs regular React since the components being used are dependent on react-native so it may be worth forking this repo and removing the direct dependencies on React if you're still having trouble with npm3 or don't wish to use it.