cli: error: bundling failed: Error: Unable to resolve module `[...]/HMRClient` after upgrading from 0.59.9 to 0.60.3 using the cli

Environment

info Fetching system and libraries information...
System:
	OS: macOS 10.14.5
	CPU: (8) x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
	Memory: 3.03 GB / 16.00 GB
	Shell: 3.2.57 - /bin/bash
Binaries:
	Node: 11.6.0 - /usr/local/bin/node
	npm: 6.9.0 - /usr/local/bin/npm
	Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
	iOS SDK:
	Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
	Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
	@react-native-community/cli: 2.5.0 => 2.5.0 
	react: 16.8.6 => 16.8.6 
	react-native: 0.60.3 => 0.60.3 
npmGlobalPackages:
	react-native-cli: 2.0.1
	react-native: 0.60.3

Description

The upgrade process from my working application on v0.59.9 to v0.60.0 does not work.

Running npx @react-native-community/cli upgrade 0.60.3 produces the following output:

info Fetching diff between v0.59.9 and v0.60.3...
info Applying diff...
warn Excluding files that exist in the template, but not in your project:
- App.js
error Excluding files that failed to apply the diff:
- .gitignore
- android/app/build.gradle
- android/app/src/main/java/com/awesomeproject/MainApplication.java
- android/settings.gradle
- ios/AwesomeProject.xcodeproj/project.pbxproj
- ios/AwesomeProject/Info.plist
Please make sure to check the actual changes after the upgrade command is finished.
You can find them in our Upgrade Helper web app: https://react-native-community.github.io/upgrade-helper/?from=0.59.9&to=0.60.3
info Installing "react-native@0.60.3" and its peer dependencies...
info Running "git status" to check what changed...
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

		new file:   .eslintrc.js
		modified:   .flowconfig
		modified:   android/app/proguard-rules.pro
		modified:   android/app/src/main/res/values/styles.xml
		modified:   android/build.gradle
		modified:   android/gradle.properties
		deleted:    android/keystores/BUCK
		deleted:    android/keystores/debug.keystore.properties
		modified:   ios/AwesomeProject-tvOS/Info.plist
		new file:   ios/AwesomeProject.xcworkspace/contents.xcworkspacedata
		new file:   ios/Podfile
		new file:   ios/Podfile.lock
		modified:   package-lock.json
		modified:   package.json

success Upgraded React Native to v0.60.3 🎉. Now you can review and commit the changes

It seems like it failed, but then succeeded?

Anyway, when I run the app on my iphone using npm start:

Looking for JS files in
/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe 

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `metro/src/lib/bundle-modules/HMRClient` from `/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/react-native/Libraries/Utilities/HMRClient.js`: Module `metro/src/lib/bundle-modules/HMRClient` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
	at ModuleResolver.resolveDependency (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
	at ResolutionRequest.resolveDependency (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
	at DependencyGraph.resolveDependency (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
	at Object.resolve (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:264:42)
	at dependencies.map.result (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
	at Array.map (<anonymous>)
	at resolveDependencies (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
	at /Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
	at Generator.next (<anonymous>)
	at asyncGeneratorStep (/Users/maximedupre/Desktop/Dropbox/Programming/iphone-app/fe/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

I tried the 4 steps to resolve the issue, but they had no effect.

I also tried upgrading manually, but the result was the same.

I also tried unlinking the two external libraries I use:

react-native unlink @react-native-community/async-storage
react-native unlink react-native-vector-icons

But still no success.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (5 by maintainers)

Most upvoted comments

I was stuck in the same issue, but I couldn`t just start a new react-native project and migrate all files. So what I did was:

  • Find the file at path: node_modules/react-native/Libraries/Utilities/HMRClient.js and change the line: const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient'); to: const MetroHMRClient = require('../../../@react-native-community/cli/node_modules/metro/src/lib/bundle-modules/HMRClient');

Was the only thing that worked for me, the only issue is that if you reinstall de node_modules you will need to replace the line again. Because that I added this script to my package.json:

  • "postinstall": "sed -i '' \"s#metro#../../../@react-native-community/cli/node_modules/metro#g\" ./node_modules/react-native/Libraries/Utilities/HMRClient.js"

The above script takes care of the replacing for each new npm install

Any news on this, it still seems to happen in recent versions:

{
  "dependencies": {
    "react": "^17.0.1",
    "react-devtools": "^4.9.0",
    "react-dom": "^17.0.1",
    "react-native-web": "^0.14.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
  },
  "devDependencies": {
    "@react-native-community/cli": "^4.13.0",
    "@react-native-community/cli-platform-android": "^4.13.0",
    "@react-native-community/cli-platform-ios": "^4.13.0",
    "metro-react-native-babel-preset": "^0.63.0",
  }
}

PS, If I apply the patch suggested by @KalebPortillo it works fine.

Everything works fine after creating a blank project with react-native init (v 0.60.3) and transferring all my code over there. I don’t know what the problem was and I don’t think we’ll ever know :p. Thanks for the help!

I have no other ideas, provided that your files are migrated correctly :<. Closing, but please keep me updated as you go debugging this.