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

Created on 8 Sep 2019 · 4Comments · Source: react-native-image-picker/react-native-image-picker

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

Source

bearwmceo

Most helpful comment

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';

bearwmceo on 8 Sep 2019

👍10 🎉4

All 4 comments

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'],
  },
};