Error: While trying to resolve module `react-native-device-info` after installing v4

Bug

After installing v4, I get the following error. Anyone else get this?

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/sam/Projects/test-mobile-client 

warning: the transform cache was reset.
Loading dependency graph, done.
error: bundling failed: Error: While trying to resolve module `react-native-device-info` from file `/Users/sam/Projects/test-mobile-client/js/env.js`, the package `/Users/sam/Projects/test-mobile-client/node_modules/react-native-device-info/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/sam/Projects/test-mobile-client/node_modules/react-native-device-info/src/index.js`. Indeed, none of these files exist:

  * /Users/sam/Projects/test-mobile-client/node_modules/react-native-device-info/src/index.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /Users/sam/Projects/test-mobile-client/node_modules/react-native-device-info/src/index.js/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/sam/Projects/test-mobile-client/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15)
    at DependencyGraph.resolveDependency (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at Object.resolve (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at dependencies.map.result (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
    at /Users/sam/Projects/test-mobile-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
    at _next (/Users/sam/Projects/test-mobile-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9)
 BUNDLE  [ios, dev] ./index.js ▓░░░░░░░░░░░░░░░ 6.3% (31/243), failed.

Environment info

React native info output:

 // paste it here

Library version: x.x.x

Steps To Reproduce

1. Install v4
2. react-native start --reset-cache …

Describe what you expected to happen:

Reproducible sample code

[ricbermo]

I just came across with this issue and I noticed I was missing ts in my metro.config.js

module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js', 'ts'],
  },
};

[mikehardy]

@ricbermo good thinking! I checked and I think you’re right - as long as you don’t override it to a specific list (which excludes .ts), the default will include it apparently https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L52