react-native-image-picker crashing at run - Metro Bundler error

2
votes

I want to use 'react-native-image-picker' in my application. After importing and following the install instructions from the github instructions. I get a metro bundler crash on run. It can't seem to locate the 'react-image-picker' or it's dependencies?

I have tried initializing a new project and ONLY installing image picker. I have tried running 'react-native link' and 'react-native link react-native-image-picker' in the root. I have tried initializing the project with expo. I've checked the directories that Metro claims are missing, and they look good to me.

import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Button
} from 'react-native';
import ImagePicker from 'react-native-image-picker';

const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

const App = () => {
  return (
    <Button title="Select Image" onPress={() => {
      ImagePicker.showImagePicker(options, (response) => {console.log('Response = ', response);})
    }} />
  );
};

error: bundling failed: Error: While trying to resolve module react-native-image-picker from file /Users/owenmorris/Documents/GitHub/fecebook/App.js, the package /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts. Indeed, none of these files exist:

  • /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  • /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) at ResolutionRequest.resolveDependency (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15) at DependencyGraph.resolveDependency (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/node-haste/DependencyGraph.js:283:16) at Object.resolve (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/lib/transformHelpers.js:264:42) at /Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31 at Array.map () at resolveDependencies (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18) at /Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33 at Generator.next () at asyncGeneratorStep (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24) at _next (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9) BUNDLE [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
2
iosreact-nativepackage-managersreact-native-image-pickermetro-bundler
restart the metro bundler by re-run react-native start – I Putu Yoga Permana
I was able to get Metro to build and launch my app in the simulator, but now I'm back to "unable to locate 'react-native-image-picker'" with suggestions for run 'react-native link react-native-image-picker' which I've done, and it still doesn't work. It just can't seem to load the image picker for some reason. – Tyler Morris
I read more on the react-native-image-picker community github, and some people with similar problems had luck with rolling back their version. I tried this rollback, and it fixed locating the depencencies, but now "null is not an object: (evaluating 'ImagePickerManager.showImagePicker')" – Tyler Morris

2 Answers

0
votes

the answer is here

simply is:

  1. Second solution

Import library from lib/common/js import ImagePicker from 'react-native-image-picker/lib/commonjs';

0
votes

I also faced the similar issue with latest release. I changed the version to 0.28.0.

npm install [email protected]
npx react-native link react-native-image-picker

Please see if it works for you.