bundling failed: Error: While trying to resolve module react-native-image-picker

[bearwmceo]

Bug

error: bundling failed: Error: While trying to resolve module react-native-image-picker from file /App/Services/File.Service.js, the package /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 (/node_modules/react-native-image-picker/src/index.ts. Indeed, none of these files exist:

• /node_modules/react-native-image-picker/src/index.ts(.native||.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.json|.native.json|.json)
• /node_modules/react-native-image-picker/src/index.ts/index(.native||.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.json|.native.json|.json)
  at ResolutionRequest.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15)
  at DependencyGraph.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
  at Object.resolve (/node_modules/metro/src/lib/transformHelpers.js:264:42)
  at dependencies.map.result (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
  at Array.map ()
  at resolveDependencies (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
  at /node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
  at Generator.next ()
  at asyncGeneratorStep (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
  at _next (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9)

Environment info

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
Memory: 357.76 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 25, 27, 28, 29
Build Tools: 28.0.3, 29.0.0
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4
npmGlobalPackages:
react-native-cli: 2.0.1

Library version: 1.1.0

Steps To Reproduce

react-native start

[bearwmceo]

Issue solved!

1. First solution

Add to metro bundler support for typescript in root folder ./metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts'],
  },
};

2. Second solution

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

[alitsvin]

import from lib/commonjs doesn't work for me, but import ImagePicker from 'react-native-image-picker/src'; does

[RubenJj]

Im having a similar issue with the react-picket component. 99% the same issue description. I tried importing the library as above but didnt work.

[fzero17]

Im having a similar issue with the react-picket component. 99% the same issue description. I tried importing the library as above but didnt work.

After doing above, you should try npx react-native start to restart it.