Duplicate name Viewport in React Native - react-native

The terminal where simulator is executed shows the following error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: ViewportMetrics
Paths: /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react/lib/ViewportMetrics.js collides with /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react-native-router-flux/node_modules/react-native-experimental-navigation/node_modules/react/lib/ViewportMetrics.js

What version of npm do you have? You have a pairDependencies problem so try to get npm v3.
Anyway if you do:
rm -rf /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react-native-router-flux/node_modules/react-native-experimental-navigation/node_modules/react/
Should work

Related

React Native: error: bundling failed: index.js: "" is not a valid identifer name

I have a React Native app which was running perfectly earlier this morning. I've deleted package-lock.json after mistakenly doing an npm install instead of a yarn install. Then I've ran yarn install and now when I try to run my app I get this error at the packager:
error: bundling failed: index.js: "" is not a valid identifer name
BUNDLE [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
I've also closed packager and Vscode, removed node_modules and tried running yarn install again but I get the same error. I haven't changed a single line in my code and it was working before that.
What is going on?
It is already opened as an issue.
https://github.com/facebook/react-native/issues/27118
https://github.com/facebook/react-native/issues/27120#issuecomment-549832676
Simply you need to delete "node_modules" and again run the command:
npm i or yarn
Also, you can simply re-create the scratch project with
react-native init example
It will work as expected. They reverted the changes on #babel/run-time at 7.7.1 version.
Have fun 🎊🎉
Delete node_modules and packages-lock.json, erase trash, close Metro Bundle, delete the app from emulator/simulator and run npm install, this way worked for me.
I had the same issue and none of the solutions mentioned here or in the links worked for me. The issue was the react-native local and global versions were different.
node node_modules/react-native/local-cli/cli.js run-ios worked for me.
and while bundling, node node_modules/react-native/local-cli/cli.js bundle --entry-file...
In short replace react-native with node node_modules/react-native/local-cli/cli.js when trying to run or bundle

Trying to uninstall rn-fetch-blob

I am having issues uninstalling.
I have run rm -rf node_modules, yarn and react-native link, and then removed compile project(':rn-fetch-blob') from build.gradle, as other question suggested, but now I am getting more errors in the source code for Android when I try to run react-native run-android (probably will happen for iOS too).
> Task :app:compileDebugJavaWithJavac FAILED
/.../MainApplication.java:6: error: package com.RNFetchBlob does not exist
import com.RNFetchBlob.RNFetchBlobPackage;
^
/.../MainApplication.java:29: error: cannot find symbol
new RNFetchBlobPackage(),
^
symbol: class RNFetchBlobPackage
2 errors
I need help. This module feels like malware.
Best bet is to look at the manual installation steps for rn-fetch-blob and do the opposite of what they are saying
https://github.com/joltup/rn-fetch-blob/blob/master/README.md#user-content-installation
Manual installation instructions
https://github.com/joltup/rn-fetch-blob/wiki/Manually-Link-Package#index
I exactly did the opposite of installation and it worked

error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactComponentTreeHook

Why? Why is react looking here? I have another test android project and it also does not have react package located there, yet it runs perfectly. Why is this one looking here? The only difference is I first did setup a directory below. In MyProject/App is where i did the init. I then moved the index.js files and package.json a level up to top level directory. I want to know the WHY of this error!
Here is the error:
error: bundling: UnableToResolveError: Unable to resolve module
react/lib/ReactComponentTreeHook from /Users/Admin/Projects/MyProject/node_modules/react- native/Libraries/Performance/Systrace.js:
Module does not exist in the module map or in these directories:
/Users/Admin/Projects/MyProject/node_modules/react- native/node_modules/react/lib
, /Users/Admin/Projects/MyProject/node_modules/react/lib
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: rm -fr $TMPDIR/react-* or `npm start --reset-cach
All these steps I have tried. They don't fix it. I will probably do another init a level above but still I want to know whey it's looking there. Is there a module map being setup somewhere incorrectly? Where do I look for this?
UPDATE: After doing init properly in the root directory of the app I now get something else:
Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactDebugCurrentFrame from /Users/Admin/Projects/MyProjectRoot/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js: Module does not exist in the module map or in these directories:
This leads to suggestions that you need alpha version of react to go along with latest react:
https://github.com/facebook/react-native/issues/13017
But doing this does not work. It just leads back to the same issue I had to begin with about ReactComponentTreeHook.
Again, same suggestions about how to fix it. rm -rf node_modules followed by npm install! But I also did a npm install --save on react react-native. I think I need some response from react-native team on how to properly interpret this kind of error. What's going on here?
Xcode 8.2 still occur same error. Three lines bellow fixed it for me :)
Downgrade react(16.0.0-alpha.12 -> 16.0.0-alpha.6) & react-native(0.45.0 -> 0.44.0)
rm -rf node_modules/react
npm i react#16.0.0-alpha.6 -S
npm i react-native#0.44.0 -S
Then run react-native run-ios
Hope this help.
The problem is that the npm init, npm install --save react -react-native does not install the correct versions. What you need to do is look at the version of react inside package.json In my case it was an alpha.
So right now need to do:
npm install --save react#16.0.0-alpha.6 react-native
but check what's inside your package.json and watch any warning messages carefully
Try install react-native-git-upgrade
$ npm install -g react-native-git-upgrade
and then run
$ react-native-git-upgrade
for me it works.
This error happens when someone upgrade react-native version.
$ npm install -g react-native-git-upgrade
$ npm install react-native#latest --save
$ react-native-git-upgrade
Close all terminals.
Then clear cache. Remove directory ~/Library/Developer/Xcode/DerivedData
In Xcode, Product-> Clean
Then run simulator from Xcode or run code on the attached device again.

Duplicate module name: react-native-vector-icons

When I install NativeBase and React-Native-Router-Flux in my react-native project I get this error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
Error: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:159:13)
at p.getName.then.name (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:134:31)
Solution was posted here
yarn add react-native-router-flux#3.38.0
You should be able to update
react-native-router-flux using:
npm i react-native-router-flux --save
It may be that trying to start the react-native packager fails again and running may be useful:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`.
You may see once attempting to run the packager again errors such as:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name
You may need to run the npm install for react-native-router-flux again.
If you work with yarn, please run this command.
yarn add react-native-router-flux#3.38.0
And if you work with npm, please run this command.
npm install react-native-router-flux#3.38.0 --save
Also you still get the issue, please downgrade react-native version to 0.41.2.
Then, it will work.
NativeBase 2.1.4 solves this issue

Requiring unknown module "ReactInstanceHandles"

Recently updated to React 0.19.0 and have started to get this error.
I've tried cleaning out the gradle folders but I'm still getting the error.
I've also tried restarting the package manager.
I fixed this by
rm -rf node_modules
Remove react from package.json, since react-native now includes it.
npm install