How to fix bundler module resolution issue without deleting/installing npm packages? - react-native

Goal: successfully build & bundle react native project using react-native-agora v3.0.1-rc.4, while preserving npm packages that i have edited.
I was told to try updating to this version by agora support staff. after a bunch of errors and managing them, I come to another issue. the project now builds, but won't successfully bundle. bundle process fails (on iOS, haven't tried android yet):
error: bundling failed: Error: Unable to resolve module `./AgoraView.native` from `node_modules/react-native-agora/lib/index.js`:
None of these files exist:
* node_modules/react-native-agora/lib/AgoraView.native(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* node_modules/react-native-agora/lib/AgoraView.native/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
RN v0.61.5
Im not sure why its trying to resolve ./AgoraView.native. As I dont have it explicitly referenced anywhere.
So far ive tried:
npm cache clean --force
uninstalling and reinstalling react-native-agora
pod install
cleaning build folder and rebuilding
How to resolve?

Did you try to delete node_modules and re-install it and clean build folder of iOS. I think it cached the last version of react-native-agoro.

An option if you have edited npm packages, and thus would prefer to avoid deleting, re-installing, and re-editing said packages this is what worked for me:
react-native start --reset-cache

Related

How to upgrade all libraries in an old react native project?

I have some experience in react native but I am relatively new to the field. I have cloned a react native project but it is very old and it contains a lot of libraries that are also either depricated or conflicting. I want to make the project compile as its not compiling now too because of the conflicting library issues. Any help or guidance regarding what i should do to make it work?
I have tried a number of things like deleting node modules and package-lock and running npm install but it doesnt run so I used --force but it still didnt make it work then I used npm install --legacy-peer-deps and it still didnt work.
i tried to upgrade the specific libraries that were mentioned in the errors but they also failed.
right now I have no idea what should be done.
As of npm version 5.2.0+, we can update all our dependencies without installing any additional packages.
Run the command in the root of your project:
npx npm-check-updates -u && npm i
"npx npm-check-updates -u" the command just updates the package.json that’s why we need tonpm i after the update the package.json.
for more info click here

react-native-twitter-lite: Error: Unable to resolve module 'crypto'

I have followed the instructions to install react-native-twitter-lite via npm page ....as per below:
npm install twitter-lite
....then on app.js:
import Twitter from 'twitter-lite';
const twtClient = new Twitter({
consumer_key: 'xxxx',
consumer_secret: 'xxxx',
});
...I get error Unable to resolve module crypto from node_modules\twitter-lite\dist\twitter.js: crypto could not be found within the project
...even though I can see that the file node_modules\twitter-lite\dist\twitter.js exists
The issue might be that cryptojs is missing from your dependencies (not installed in your app), but react-native-twitter-lite still need it to run for security. You surely have the twitter.js but not the crypto.js. Cryptojs is used by twitter-lite to cypher and encrypt data. You may choose to use Nodejs's crypto module or react-native's build-in cryptojs. I always choose the later one for a more native behavior. For that, simple run
npm install react-native-crypto-js --save.
The first time I run into this issue this source helped me understand.
This happens to me, most likely when installing a new package to my project, I didn't try to install react-native-twitter-lite , but my general approach is :
Try to install the missing module yourself , in your case, install Crypto
Delete node_modules and install the dependencies again, run rm -rf node_modules && npm install
run your project npm start and then npm run android && npm run ios
If you install native module you will need to rebuild your app. It’s jut hot reloadable.
If that’s not your issue, but you’re using typescript, you may be missing a dependency that can fortunately be resolved using:
npx typesync
Are you using Expo or Xcode/Android Studio? If Expo, note that Expo handles a Bare and a Managed workflow. If you are using a managed workflow you may have these issues since Expo is managing native modules for you so you may want to check if Expo has a similar dependency to what you’re using, otherwise you may want to eject from Expo.
If developing for iOS, you may also want to check if you’ve installed the pods you need. You can do this using the following:
npx pod-install from root of project directory (likely same directory as package.json)
All else fails:
rn -rf node_modules
npm install && npx pod-install
(If usingTypescript also try npx typesync)
If developing for Android, make sure you add necessary code on gradle file, can be pasted anywhere (likely in docs)

Error trying to resolve #expo/vector-icons/FontAwesome in a vanilla React Native project

I ran into this strange error today: Unable to resolve module `#expo/vector-icons/FontAwesome` from `node_modules/react-native-elements/src/checkbox/CheckBoxIcon.js`: #expo/vector-icons/FontAwesome could not be found within the project.
This project does not use expo, it was built using vanilla React Native CLI. I checked the CheckBoxIcon.js file in node_modules and I don't see any references to #expo.
Not sure if it matters but I was working on ane xpo project prior to this but it shouldn't be affecting this separate project I'm working on, will it?
I'm not sure how to fix this, I have tried clearing watchman watches, deleting node_modules and reset metro's cache.
npm start --reset-cache did not work but npm start -- --reset-cache fixed my issue.

react-native link can't find my MainApplication.java file

Every time I try to react-native link a new library, I get the same error message. Here it is for react-native-video.
rnpm-install info Linking react-native-video android dependency
rnpm-install ERR! Something went wrong while linking. Error: ENOENT: no such file or directory, open '/Users/Me/Projects/myProject/android/app/src/main/java/com/companyName/appName/MainApplication.java'
Please file an issue here: https://github.com/facebook/react-native/issues
The actual location of my MainApplication.java file is
./android/app/src/main/java/com/appName/MainApplication.java
The difference is that React Native Link is including "company name" in the path, which doesn't match my project.
How can I fix this?
I looked over some topic and found solution, you can try with:
npm install --save-dev babel-plugin-module-resolver
and then add your npm install package & react-native link again.
Good luck
I'm pretty late to the party on this, but for future reference;
TLDR: Adding another folder like so java/com/companyName/AppName/ will fix your issue.
After updating to the latest react-native I had this issue too. Your android path contains your apps ID so com.test.app path should be android/app/src/main/java/com/test/app.
Looking at your error message, its actually telling you where it's expecting the file to be;
Error: ENOENT: no such file or directory, open '/Users/Me/Projects/myProject/android/app/src/main/java/com/companyName/appName/MainApplication.java'
If you create another folder like so java/com/companyName/AppName/ you will be able to automatically link plugins.
Another way I tried and it works for me:
rm -rf node_modules && npm install
Then retry install your package:
ex:
npm install react-native-image-picker#latest --save
Then react-native link your package
react-native link react-native-image-picker
There are only two options that i am aware of to solve this problem
close all the terminals to stop the node server running on a difference terminal.
If you still have the mistake after that then try the following option
You might still have the error because you uninstall and re-install react-native without paying attention to the version that you installed which for most case will be the latest version. So double check the current version of your react-native when installing it. "\n"
so either
in your package.json you add "react-native": "^0.60.5" if the version is 0.60.5 replace "^0.60.5" by the version you are trying to run, in devDepencies and run npm install
or
run npm install react-native#0.60.5 or npm install react-native#version

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