Unable to resolve module `metro/src/lib/bundle-modules/HMRClient` - react-native

Question

I just upgraded from RN 0.55.4 to 0.59.3.....now Im getting following error:
Error: Unable to resolve module metro/src/lib/bundle-modules/HMRClient from ....\node_modules\react-native\Libraries\Utilities\HMRClient.js: Module metro/src/lib/bundle-modules/HMRClient does not exist in the Haste module map
The HMRClient.js file does include the following require statement: const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');.....and I cant see that path beginning with 'metro' anywhere so I guess I need to add it somehow. There is also another require statement as follows: const invariant = require('invariant'); ....no file name 'invariant' exists either.
Facebook say this was fixed back in 0.53.0 master but looks like its back
https://github.com/facebook/react-native/issues/17742
Below is my package.json
{
"name": "xs",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "flow",
"flow start": "flow start",
"flow stop": "flow stop",
"flow status": "flow status",
"flow coverage": "flow coverage"
},
"dependencies": {
"firebase": "^5.11.1",
"flow": "^0.2.3",
"flow-bin": "^0.65.0",
"prop-types": "^15.6.1",
"react": "16.8.3",
"react-native": "0.59.3",
"react-native-elements": "^0.19.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-maps": "git://github.com/react-native-community/react-native-maps.git#master",
"react-native-switch": "^1.4.0",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^2.5.5",
"react-redux": "^5.1.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^8.2.6",
"babel-preset-flow": "^6.23.0",
"eslint": "^4.9.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"prettier-eslint": "^8.8.2",
"#babel/core": "^7.4.3",
"#babel/runtime": "^7.4.3",
"babel-jest": "^24.7.1",
"jest": "^24.7.1",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Please help!
p.s. the below suggestion does not work
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-*.

Answer 1

Pay attention when running npm install to see if there is any need for a specific version of something.
First check babel config files then if it doesn't work try the changes in package.json.
Try config files and deps as below.
This is a config that worked for me for an update from 0.54 to 0.59.5:
package.json:
" dependencies": {
"react": "16.8.3",
"react-native": "0.59.5",
// ...
},
"devDependencies": {
"#babel/core": "^7.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3",
// ...
}
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
.babelrc:
{
"presets": ["module:metro-react-native-babel-preset"]
}
The only useful info I could find in the RN release notes about babel and metro changes was at [0.57] here:
https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
UPDATE NOTE:
Trying config files as the ones from a new working project (created with 0.59.9) doesn't seem to work for an update from 0.54 to 0.59
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
metro.config.js:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
and no .babelrc file.
package.json:
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/runtime": "^7.4.5",
"metro-react-native-babel-preset": "^0.54.1",
},