Develop Reference

How to resolve this error in react native? ERROR: http could not be found within the project or in these directories: node_modules

[enter image description here](https://i.stack.imgur.com/MY5Rn.png)
BUNDLE ./index.js
error: Error: Unable to resolve module http from /home/divum/Param/param-wallet-mobile/node_modules/https-browserify/index.js: http could not be found within the project or in these directories:
node_modules
../../node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
> 1 | var http = require('http')
| ^
2 | var url = require('url')
3 |
4 | var https = module.exports
at ModuleResolver.resolveDependency (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:129:15)
at DependencyGraph.resolveDependency (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
at Object.resolve (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /home/divum/Param/param-wallet-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/home/divum/Param/param-wallet-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
I tried these steps :
Clear watchman watches: watchman watch-del-all
Delete node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
I also tried cleaning my gradle ( ./gradlew clean) & cleared the cache and restarted again (npx react-native start --reset-cache , npx react-native run-android)
Please help me out , this error keeps on poping up to me. I can't even run my project because of this issue.

Implement ImagePicker into React-Native Android

I am trying to implement the image picker library into my react native project for android. However, I am getting a response error code of 500 which I cannot seem to understand even though I followed the video guide completely. The video guide which I followed is this https://www.youtube.com/watch?v=FXG3AJ6OJCk.
I also linked it by running the link after I have installed the library.
Any help would be greatly appreciates.
npm link react-native-image-picker
This is the function and when I call it, it returns the 500 error as shown below
import { ImagePicker } from 'react-native-image-picker';
takePic() {
ImagePicker.showImagePicker({}, (response)=> {
console.log(response);
})
}
Returned:
The development server returned response error code: 500
URL: http://192.168.1.105:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false
Body:
{"originModulePath":"C:\\New_Mobile\\FYP\\src\\components\\Drawer\\Profile.js","targetModuleName":"react-native-image-picker","message":"Unable to resolve module `react-native-image-picker` from `C:\\New_Mobile\\FYP\\src\\components\\Drawer\\Profile.js`:
Module `react-native-image-picker` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n
1. Clear watchman watches: `watchman watch-del-all`.\n
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `react-native-image-picker` from `C:\\New_Mobile\\FYP\\src\\components\\Drawer\\Profile.js`:
Module `react-native-image-picker` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n
1. Clear watchman watches: `watchman watch-del-all`.\n
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `react-native-image-picker` from `C:\\New_Mobile\\FYP\\src\\components\\Drawer\\Profile.js`:
Module `react-native-image-picker` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n
1. Clear watchman watches: `watchman watch-del-all`.\n
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n at ModuleResolver.resolveDependency (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ModuleResolution.js:183:15)\n at ResolutionRequest.resolveDependency (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ResolutionRequest.js:52:18)\n at DependencyGraph.resolveDependency (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\node-haste\\DependencyGraph.js:283:16)\n at Object.resolve (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\lib\\transformHelpers.js:261:42)\n at dependencies.map.result (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:399:31)\n at Array.map (<anonymous>)\n at resolveDependencies (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:396:18)\n at C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:269:33\n at Generator.next (<anonymous>)\n at asyncGeneratorStep (C:\\New_Mobile\\FYP\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:87:24)"}
processBundleResult
BundleDownloader.java:10
access$200
BundleDownloader.java:1
onChunkComplete
BundleDownloader.java:6
emitChunk
MultipartStreamReader.java:9
readAllParts
MultipartStreamReader.java:21
processMultipartResponse
BundleDownloader.java:4
access$100
BundleDownloader.java:1
onResponse
BundleDownloader.java:10
execute
RealCall.java:5
run
NamedRunnable.java:3
runWorker
ThreadPoolExecutor.java:1113
run
ThreadPoolExecutor.java:588
run
Thread.java:818

react-native-image-picker does not installed ,try execute this command
npm install --save react-native-image-picker & react-native link react-native-image-picker
you can read docs here

unable to make signed apk in react native

While trying to make signed apk of my react-native project using link
Generating Signed APK I am getting following error.
Unable to resolve module `./touchables` from `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\index.js`: The module `./touchables` could not be found from `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\index.js`. Indeed, none of these files exist: * `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\touchables(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\touchables\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
Error: Unable to resolve module `./touchables` from `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\index.js`: The module `./touchables` could not be found from `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\index.js`. Indeed, none of these files exist: * `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\touchables(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `C:\Users\pc\Desktop\GSTCalc\node_modules\react-native-gesture-handler\touchables\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ModuleResolver.resolveDependency (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:120:15)
at ResolutionRequest.resolveDependency (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
at DependencyGraph.resolveDependency (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)
at Object.resolve (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\lib\transformHelpers.js:141:30)
at dependencies.map.result (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
at Array.map (<anonymous>)
at resolveDependencies (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
at C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
at Generator.next (<anonymous>)
at step (C:\Users\pc\Desktop\GSTCalc\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
What should I do? Thanks in advance.
Edit:
When I tried all the solution provided below I started getting a different
error.Which is as follows:
bundle: Writing bundle output to:
C:\Users\pc\Desktop\GSTAppDesign\GSTCalc\android\app\build\generated\assets\react\release\index.android.bundle
bundle: Done writing bundle output bundle: Copying 7 asset files
bundle: Done copying assets
C:\Users\pc.gradle\caches\transforms-1\files-1.1\appcompat-v7-28.0.0.aar\2e72d58316ce557e86b0d638298e5052\res\values-v28\values-v28.xml:9:5-12:13:
AAPT: error: resource android:attr/dialogCornerRadius not found.
C:\Users\pc\Desktop\GSTAppDesign\GSTCalc\android\app\build\intermediates\incremental\mergeReleaseResources\merged.dir\values-v28\values-v28.xml:11:
AAPT: error: resource android:attr/dialogCornerRadius not found.
C:\Users\pc.gradle\caches\transforms-1\files-1.1\appcompat-v7-28.0.0.aar\2e72d58316ce557e86b0d638298e5052\res\values\values.xml:1304:5-69:
AAPT: error: resource android:attr/fontVariationSettings not found.
C:\Users\pc.gradle\caches\transforms-1\files-1.1\appcompat-v7-28.0.0.aar\2e72d58316ce557e86b0d638298e5052\res\values\values.xml:1304:5-69:
AAPT: error: resource android:attr/ttcIndex not found.
error: failed linking references.

I think you are getting error because of you have installed react-navigation in you react native project fro this you have to also install below package.
try to install
npm i --save react-native-gesture-handler
react-native link react-native-gesture-handler
Try this one to clear and reset cache:
RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache
Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache
https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d
hope this will work for you, work for me

Before you build your signed APK first make sure you have your bundles in your assets in android folder.
Run this command to build the bundles
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Also, add this package for gesture handler
npm install -save react-native-gesture-handler

I'm Trying to run my reactNative app on emulator but I'm getting this error in android emulator

Error Image:
Following is the error message
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false
Body:
{"originModulePath":"/home/junior/ReactNative/HelloWorld/index.js","targetModuleName":"#babel/runtime/helpers/interopRequireDefault","message":"Unable to resolve module #babel/runtime/helpers/interopRequireDefault from /home/junior/ReactNative/HelloWorld/index.js: Module #babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.","errors":[{"description":"Unable to resolve module #babel/runtime/helpers/interopRequireDefault from /home/junior/ReactNative/HelloWorld/index.js: Module #babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*."}],"name":"Error","stack":"Error: Unable to resolve module #babel/runtime/helpers/interopRequireDefault from /home/junior/ReactNative/HelloWorld/index.js: Module #babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.\n at ModuleResolver.resolveDependency (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)\n at ResolutionRequest.resolveDependency (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)\n at DependencyGraph.resolveDependency (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)\n at Object.resolve (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/lib/transformHelpers.js:180:25)\n at dependencies.map.result (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)\n at Array.map ()\n at resolveDependencies (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)\n at /home/junior/ReactNative/HelloWorld/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33\n at Generator.next ()\n at step (/home/junior/ReactNative/HelloWorld/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)"}
processBundleResult
BundleDownloader.java:296
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:174
execute
RealCall.java:153
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1167
run
ThreadPoolExecutor.java:641
run
Thread.java:764

Run these commands from the terminal ( in your project directory):
npm add #babel/runtime
npm install

react-native Error: Unable to resolve module `AccessibilityInfo`

I'm new in React-native I have followed all the instruction when I try to build my first app I got this error . I have clear catch restart npm but still got this error.
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false
Body:
{"originModulePath":"F:\\React Native\\AttendenceSystem\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js","targetModuleName":"AccessibilityInfo","message":"Unable to resolve module `AccessibilityInfo` from `F:\\React Native\\AttendenceSystem\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `AccessibilityInfo` from `F:\\React Native\\AttendenceSystem\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `AccessibilityInfo` from `F:\\React Native\\AttendenceSystem\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n at ModuleResolver.resolveDependency (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ModuleResolution.js:167:1306)\n at ResolutionRequest.resolveDependency (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ResolutionRequest.js:80:16)\n at DependencyGraph.resolveDependency (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\node-haste\\DependencyGraph.js:237:485)\n at Object.resolve (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\lib\\transformHelpers.js:116:25)\n at dependencies.map.result (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:298:29)\n at Array.map (<anonymous>)\n at resolveDependencies (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:294:16)\n at F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:159:33\n at Generator.next (<anonymous>)\n at step (F:\\React Native\\AttendenceSystem\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:239:307)"}
processBundleResult
BundleDownloader.java:285
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:163
execute
RealCall.java:153
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1113
run
ThreadPoolExecutor.java:588
run
Thread.java:818

That error is because of your react native project version.
You have to create your project like this by this version for now --->
react-native init ProjectName --version 0.55.4
Just wait for next version of React Native to let them fix that problem.

See dependencies & devDependencies your package.json file if your find react native version 0.56 like this ---->
"react-native":"0.56.0"
in dependencies then change it to
"react-native":"0.55.4"
and in devDependencies change
"babel-preset-react-native": "5",
to
"babel-preset-react-native": "4.0.0",
and finally run
npm install

Seems like downgrading react-native version will fix the issue. Are you using the latest 0.56.1? New releases are pretty unstable especially if you are running Windows.
Downgrading to 0.55.4 should fix your problem: npm install react-native#0.55.4
You can take a look at this very similar issue: https://github.com/facebook/react-native/issues/14209

I assume you are using Windows. I got the same error lately and when I searched for it on github issues of react native, saw that people changed their package.json file. What works for my case is below, you can adapt it to your needs;
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4"
},
"devDependencies": {
"babel-jest": "22.4.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.4",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Do not forget to delete your node_modules folder first, then change your package.json similar to above, then finally run npm install.