Redundant dependency to react-native

[sushruth]

This issue comes up whenever I try to do a npm install some_module within my_project/dist/ngRnSeed folder. I do not know if that is not allowed while using this plugin, but I did anyway. The install works fine but after the install if I run gulp start.ios from my_project folder, it shows this kind of error :

This error is caused by a @providesModule declaration with the same name accross two different files.
at HasteMap._updateHasteMap (/Users/Mervyn/CodingNet/playwithreactnative/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:160:15)

Not that this does not happen before doing the npm install some_module

Apparently this is caused by redundant dependency to react-native according to this issue from another project.

[marclaval]

my_project/dist/ngRnSeed is a regular React Native project, so adding plugins should work (and fail) the same way as in any project.

I haven't played with plugins yet, so I'm interested to get some feedback (see #48).
Does this error occurs with any plugin? Or only with some of them?
If you can install some, how do you use them in Angular 2?

[sushruth]

Sorry for replying a month late. The error occurs with any plugin. Even when the ngRnSeed directory is removed from the seed project and placed elsewhere.

[xiehan]

I'm having this error too. I can run the ngRnSeed project (without modifications) just fine, but in my own project I added react-native-material-kit and that seems to have broken everything. (I had to npm install it inside my dist/myproject directory and then use react-native link to ensure it ends up in the right place.)

What's weird is that my project works fine in the iOS Simulator (although I haven't tried using anything from react-native-material-kit yet, but at least the thing builds and installs properly) but absolutely will not run on the Android Simulator. The React Packager shell window has the following error:

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: Object.es6
  Paths: /[redacted]/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/polyfills.js collides with /[redacted]/dist/[projectname]/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/polyfills.js

This error is caused by a @providesModule declaration with the same name accross two different files.
Error: @providesModule naming collision:
  Duplicate module name: Object.es6
  Paths: /[redacted]/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/polyfills.js collides with /[redacted]/dist/[projectname]/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/polyfills.js

This error is caused by a @providesModule declaration with the same name accross two different files.
    at HasteMap._updateHasteMap (/[redacted]/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:162:15)
    at /[redacted]/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:127:25
~
Process terminated. Press <enter> to close the window

The other window still somehow manages to build the project and load the app in the Android emulator, but I just get a red screen with an error stacktrace; the app won't actually run.

[marclaval]

I can't reproduce the issue with https://github.com/mlaval/angular2-react-native-seed

What I did:

• npm i -g rnpm react-native-cli just to be sure to have the latest versions
• git clone https://github.com/mlaval/angular2-react-native-seed.git
• cd angular2-react-native-seed
• npm i
• gulp init
• cd dist/ngRnSeed/
• rnpm install react-native-material-kit
• cd ../..
• gulp start.ios or gulp start.android

Can you please provide a reproducer using this seed project?

[xiehan]

It took me a sec to reproduce it but I think I have an idea of what the issue is.

If I do:

git clone git clone https://github.com/mlaval/angular2-react-native-seed.git
cd angular2-react-native-seed
npm i
gulp init
cd dist/ngRnSeed/
npm install --save react-native-material-kit
react-native link
gulp start.android

...everything does indeed work fine.

However, in my project, I had tried to be clever and added the following to gulpfile.js:

gulp.task('!installMaterialKit', function (done) {
    executeInAppDir('npm install --save react-native-material-kit', done);
});
gulp.task('!linkLibraries', ['!installMaterialKit'], function (done) {
    executeInAppDir('react-native link', done);
});
gulp.task('!launch.android', ['!linkLibraries'], function (done) {
    executeInAppDir('react-native run-android', done);
});

This way, if I ever have to re-clone the repo for whatever reason (or if someone else tries to use it), these steps are automated, rather than having to remember or document that you need to manually do the cd dist/ngRnSeed && npm install --save react-native-material-kit && react-native link step.

Anyway, so it turns out the problem is with the executeInAppDir('react-native link', done); bit.

If I've (manually) run react-native link before, this works fine, no problems. However, if the above step is the first time react-native link is run, it causes problems. There's no errors in the console, but the shell hangs, and I need to Ctrl+C to exit. What's misleading is that if you then do:

cd dist/ngRnSeed/
react-native link

You then get:

rnpm-install info Android module react-native-material-kit is already linked 
rnpm-install info iOS module react-native-material-kit is already linked

...which had led me to believe that the plugin was properly linked after all. But my best guess is that something as part of that initial react-native link step using Gulp fails, and the project subsequently won't run in Android.

In any case, this isn't a huge deal for now -- I have enough to keep working -- but if this is something that can be looked into in the future, that'd be great... I can't imagine I'm the only one wanting to bring in a plugin like this, and IMO this kind of process should be automatable using Gulp, rather than having to be done manually.

[marclaval]

I can reproduce the same.
It seems that react-native link command does work nicely with exec.
You should report that to the react-native project: https://github.com/facebook/react-native

Closing this issue as it is not related to the react-native-renderer itself.