Issue

According to the React Native Upgrade Helper, I upgrade my React Native project from v0.60.2  to v0.64.1. But the bundler throws a fatal error: None of these files exist.

The directory structure of my project is as follows:

.
├── button.js
└── img
    ├── check@2x.android.png
    └── check@2x.ios.png

And button.js code contains:

<Image source={require('./img/check.png')} />

The error is as follows:

error: Error: Unable to resolve module ./check.png from button.js:

None of these files exist:
  * check.png
  * check.png/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at Object.resolve (/Volumes/develop//node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

Solution

The new version of Metro requires original files, in my project is check.png. Refer to the Image document. If you need to display different images according to different platforms, you can add check.android.png and check.ios.png. You can also use the @2x and @3x suffixes to provide images for different screen densities.

Finally, the project directory is as follows.

.
├── button.js
└── img
    ├── check.png
    ├── check.android.png
    ├── check.ios.png
    ├── check@2x.android.png
    └── check@2x.ios.png