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

Created on 16 Jul 2019  Â·  16Comments  Â·  Source: react-native-community/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 "[email protected]" 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.

bug
Source
picture maximedupre

Most helpful comment

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

  • Finde 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 after each new npm install

picture KalebPortillo on 23 Aug 2019
👍9 🎉4

All 16 comments

Did you restart Metro after upgrading? Is the node_modules/metro/src/lib/bundle-modules/HMRClient.js file present? Do you have a repro?

This is likely not an issue with the CLI, but after figuring out what's the root cause, we can think if there's anything we can do to make it easier in the future.

thymikee picture thymikee on 16 Jul 2019

Thanks for the quick response :-). Metro was restarted after the upgrade and the HMRClient.js is definitely present. I don't have a repro, because the project I'm working on is private.

I guess that to fix the problem, I would need to create a new react-native init application and transfer all the code over there.

I would respectfully argue that it is an issue with the CLI, since the goal of react-native upgrade is to automate the upgrade process and clearly it isn't working (in my very specific case at least).

maximedupre picture maximedupre on 16 Jul 2019

I hope you understand that without a repro it's impossible to tackle this. If the file is there, and Metro doesn't see it through Haste module system, it's clearly Metro or Watchman fault. The question is – why it still fails after you cleared the caches. Or maybe you didn't? I cannot be sure about that unfortunately.

thymikee picture thymikee on 16 Jul 2019

Yep I understand, that's why I'm saying the only other alternative I see is to start from a blank react-native init project.

I just ran the 4 steps again:

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-*`.

And double checked that the file is present (and it is).

Anyway, I guess you can close this issue until someone else wants to reopen it with a repro.

Thanks!

maximedupre picture maximedupre on 16 Jul 2019

Actually I just realized now that the error message alternates with the one I posted previously and this one:

console.error "React Native version mismatch.

JavaScript version: 0.60.3
Native version: 0.59.9

Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with `watchman watch-del-all && react-native start --reset-cache`"

And of course I did watchman watch-del-all && react-native start --reset-cache, with no success (the same error message occurs).

maximedupre picture maximedupre on 16 Jul 2019

Maybe you could try this? https://github.com/pmadruga/react-native-clean-project#readme

thymikee picture thymikee on 16 Jul 2019

Awesome lib! I ran it and it cleaned my project, but I still get the React Native version mismatch error. It seems to be pretty consistent with this error now.

maximedupre picture maximedupre on 16 Jul 2019

Did you run pod install if you're on iOS?

thymikee picture thymikee on 16 Jul 2019

Indeed I forgot to run pod install:

pod install
Detected React Native module pods for RNCAsyncStorage and RNVectorIcons
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `RNCAsyncStorage` from `../node_modules/@react-native-community/async-storage`
Fetching podspec for `RNVectorIcons` from `../node_modules/react-native-vector-icons`
Fetching podspec for `React` from `../node_modules/react-native/`
Fetching podspec for `React-Core` from `../node_modules/react-native/React`
Fetching podspec for `React-DevSupport` from `../node_modules/react-native/React`
Fetching podspec for `React-RCTActionSheet` from `../node_modules/react-native/Libraries/ActionSheetIOS`
Fetching podspec for `React-RCTAnimation` from `../node_modules/react-native/Libraries/NativeAnimation`
Fetching podspec for `React-RCTBlob` from `../node_modules/react-native/Libraries/Blob`
Fetching podspec for `React-RCTImage` from `../node_modules/react-native/Libraries/Image`
Fetching podspec for `React-RCTLinking` from `../node_modules/react-native/Libraries/LinkingIOS`
Fetching podspec for `React-RCTNetwork` from `../node_modules/react-native/Libraries/Network`
Fetching podspec for `React-RCTSettings` from `../node_modules/react-native/Libraries/Settings`
Fetching podspec for `React-RCTText` from `../node_modules/react-native/Libraries/Text`
Fetching podspec for `React-RCTVibration` from `../node_modules/react-native/Libraries/Vibration`
Fetching podspec for `React-RCTWebSocket` from `../node_modules/react-native/Libraries/WebSocket`
Fetching podspec for `React-cxxreact` from `../node_modules/react-native/ReactCommon/cxxreact`
Fetching podspec for `React-fishhook` from `../node_modules/react-native/Libraries/fishhook`
Fetching podspec for `React-jsi` from `../node_modules/react-native/ReactCommon/jsi`
Fetching podspec for `React-jsiexecutor` from `../node_modules/react-native/ReactCommon/jsiexecutor`
Fetching podspec for `React-jsinspector` from `../node_modules/react-native/ReactCommon/jsinspector`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Fetching podspec for `yoga` from `../node_modules/react-native/ReactCommon/yoga`
Downloading dependencies
Installing DoubleConversion (1.1.6)
Installing Folly (2018.10.22.00)
Installing RNCAsyncStorage (1.5.0)
Installing RNVectorIcons (6.6.0)
Installing React (0.60.3)
Installing React-Core (0.60.3)
Installing React-DevSupport (0.60.3)
Installing React-RCTActionSheet (0.60.3)
Installing React-RCTAnimation (0.60.3)
Installing React-RCTBlob (0.60.3)
Installing React-RCTImage (0.60.3)
Installing React-RCTLinking (0.60.3)
Installing React-RCTNetwork (0.60.3)
Installing React-RCTSettings (0.60.3)
Installing React-RCTText (0.60.3)
Installing React-RCTVibration (0.60.3)
Installing React-RCTWebSocket (0.60.3)
Installing React-cxxreact (0.60.3)
Installing React-fishhook (0.60.3)
Installing React-jsi (0.60.3)
Installing React-jsiexecutor (0.60.3)
Installing React-jsinspector (0.60.3)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Installing yoga (0.60.3.React)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 24 dependencies from the Podfile and 25 total pods installed.

[!] `<PBXGroup name=`Recovered References` UUID=`C1E0CEAB22BF05DC002B7ACE`>` attempted to initialize an object with an unknown UUID. `44A312C554074C20A0E3936E` for attribute: `children`. This can be the result of a merge and  the unknown UUID is being discarded.

[!] `<PBXGroup name=`Recovered References` UUID=`C1E0CEAB22BF05DC002B7ACE`>` attempted to initialize an object with an unknown UUID. `C09CF34A3E154776BB6874DE` for attribute: `children`. This can be the result of a merge and  the unknown UUID is being discarded.

[!] `<PBXGroup name=`Recovered References` UUID=`C1E0CEAB22BF05DC002B7ACE`>` attempted to initialize an object with an unknown UUID. `DC5DD2C1B0234120ACFFC0C2` for attribute: `children`. This can be the result of a merge and  the unknown UUID is being discarded.

[!] `<PBXFrameworksBuildPhase UUID=`2D02E4781E0B4A5D006451C7`>` attempted to initialize an object with an unknown UUID. `964C0D2526FF4AA49F49C931` for attribute: `files`. This can be the result of a merge and  the unknown UUID is being discarded.

[!] The `AwesomeProjectTests [Debug]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods-AwesomeProjectTests/Pods-AwesomeProjectTests.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `AwesomeProjectTests [Release]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods-AwesomeProjectTests/Pods-AwesomeProjectTests.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

Still the same problem after running watchman watch-del-all && react-native start --reset-cache and opening the app on my iPhone :/.

maximedupre picture maximedupre on 16 Jul 2019

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

thymikee picture thymikee on 16 Jul 2019
👍1

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!

maximedupre picture maximedupre on 17 Jul 2019
👍1

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

  • Finde 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 after each new npm install

KalebPortillo picture KalebPortillo on 23 Aug 2019
👍9 🎉4

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.

cglacet picture cglacet on 27 Oct 2020
👍1

It seems like this path has been fixed in recent versions.

cglacet picture cglacet on 1 Feb 2021

I just had the same issue, after running the patch like @KalebPortillo succeed everything works fine.

jctf picture jctf on 25 Feb 2021

There's a minor change I had to do for Mac and Linux. Here are the respective commands:

OSX - sed -i '' 's#metro#../../../@react-native-community/cli/node_modules/metro#g' ./node_modules/react-native/Libraries/Utilities/HMRClient.js

Linux - sed -i 's#metro#../../../@react-native-community/cli/node_modules/metro#g' ./node_modules/react-native/Libraries/Utilities/HMRClient.js

CatsNipYummy picture CatsNipYummy on 24 Apr 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

k3nda picture k3nda  Â·  3Comments
ferrannp picture ferrannp  Â·  4Comments
sophister picture sophister  Â·  4Comments
jacargentina picture jacargentina  Â·  4Comments
ctavan picture ctavan  Â·  3Comments