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
Related
[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.
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
Hope everyone is doing great i have a issue in react native command i made the assets folder and after that running a command
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
but its giving me error again n again
Unable to resolve module `AccessibilityInfo` from `C:\AnkitaFolder\Vanilla1\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map
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 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-*`.
I tried everything possible but its still not working once it worked and again its giving the same error.Version i am using are mentioned below..
NPM-VER- 6.3.0
"react": "16.4.1",
"react-native": "0.56.0"
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "5",
"jest": "23.4.2",
"react-test-renderer": "16.4.1"
},
Try to clean npm and all caches. If its not helping maybe your bundle props is wrong or files corrupted
rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*
cd android && ./gradlew clean
Delete all node_modules
npm cache clean or npm cache clean --force
Or
On windows React 0.56 not working forhttps://github.com/facebook/react-native/issues/19953alsohttps://github.com/facebook/react-native/issues/20353
I created a React Native project on Windows 10 using create-react-native-app. Then I ran npm run eject to get a standard React Native application. For a few days, the application was working fine, running npm run android would display the application on my device correctlu. But after installing a few modules (react-native-app-auth, react-native-navigation), this error started popping up in the Node console whenever I tried to run the application, and is now constantly popping up in every project, even the new ones.
path\to\project\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `ProgressBarAndroid` does not exist in the Haste module map
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 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-*`.
at ModuleResolver.resolveDependency (C:\path\to\project\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:161:1460)
at ResolutionRequest.resolveDependency (C:\path\to\project\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (C:\path\to\project\node_modules\metro\src\node-haste\DependencyGraph.js:272:4579)
at dependencies.map.relativePath (C:\path\to\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (C:\path\to\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:374:16)
at C:\path\to\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (C:\path\to\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:313)
at C:\path\to\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:473
BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
I tried following the instructions there, to no avail: https://github.com/facebook/react-native/issues/4968
I also tried following the instructions there (my issue doesn't seem related to theirs), to no avail: React native: Module `DrawerLayoutAndroid` does not exist in the Haste module map
If I do what is suggested in the only reply, then the same error appears but with a different native module, and if I keep removing the lines, it keeps popping up with a different module every time.
I also tried starting from scratch, creating a new project, using different versions of react-native, even reinstalling Node and npm entirely, but the error still pops up. The only way I found to make it work again is to start from scratch on another machine.
Thanks in advance.
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.