React-native: 0.60.0 - 0.60.3 - Error screen on fresh started app (RefreshReg)

[NicholasBertazzon]

Hi,
I tried to start a fresh 0.60.3 react-native app and I got this error:
Can't find variable: $RefreshReg$
I'm developing under Windows 10, already tried to clean Android and reset cache.

Thanks.

React Native version: 0.60.3, but it also happens on 0.60.0, not tested on < 0.60

Steps To Reproduce

1. npx react-native init test
2. run it

Screenshots:

[ecreeth]

@NicholasBertazzon You can provide a little more information about the error, so that it can be easier to solve it. Maybe a screenshot or a repo

[NicholasBertazzon]

@NicholasBertazzon You can provide a little more information about the error, so that it can be easier to solve it. Maybe a screenshot or a repo

Of course, done.
I also tried to find "RefreshReg" in the whole node_modules but couldn't find a single line with it.
Managed to find it in the web:
https://github.com/facebook/react/blob/master/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap

[NicholasBertazzon]

@ecreeth @kelset
I don't know guys, I'm done.
Since the problem appears to be in react-refresh, I tried to downgrade it. I tried with a bunch of versions but it wasn't working, so I switched to 0.0.2, reset the cache and what? It worked. Then I tried to go up, tried with 0.0.7, reset cache, 0.0.9, reset cache, 0.1.0, reset cache, 0.2.0, reset cache, and it's still working, even if 0.2.0 is the same as the one that is being installed at the beginning. What? Why?

[kelset]

Uhm that sounds super weird but at the same time, it seems to be suggesting that it's a problem related to caching :/

When there is Android involved sometimes I even try different simulators because there are some derived datas that are persisted and only way is to do a clean slate.

Also, when you start metro can you try to pass the flag --reset-cache?

[NicholasBertazzon]

Also, when you start metro can you try to pass the flag --reset-cache?

That's what I meant when I wrote "reset cache" :)
I did it a lot of times yesterday too, but it didn't work.

[kelset]

oh ok - then I'd suggest you clean all the caches 😂
I usually run all these commands (but not sure which ones work on Windows) + the Android gradle cleans (gradlew clean and gladlew cleanBuildCache).

rm -rf node_modules;
rm -rf $TMPDIR/react-native-packager-cache-*;
rm -rf $TMPDIR/metro-*;
rm -rf $TMPDIR/react-*;
rm -rf $TMPDIR/haste-*;
watchman watch-del-all;
yarn;
yarn start --reset-cache; (for starting the bundler)

[vincentwuhrlin]

Hello, i have too this error since today...

I have tested to downgrade react-refresh, back to 0.2.0, restart OS (Mac), delete all cache, delete Derivated Data on Xcode, nothing to do...
When i disable DEV mode, i don't have this error.

If someone have an idea... 😕

Error occurs :
2019-07-13 21:03:24.951 [error][tid:com.facebook.react.JavaScript] Can't find variable: $RefreshReg$
2019-07-13 21:03:24.951024+0200 vinz[2258:27567] Can't find variable: $RefreshReg$
2019-07-13 21:03:25.004 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: $RefreshReg$
2019-07-13 21:03:25.003796+0200 vinz[2258:27581] Unhandled JS Exception: Can't find variable: $RefreshReg$
2019-07-13 21:03:25.009 [info][tid:com.facebook.react.JavaScript] 'Failed to print error: ', 'Can\'t find variable: $RefreshReg$'
2019-07-13 21:03:25.008811+0200 vinz[2258:27567] 'Failed to print error: ', 'Can\'t find variable: $RefreshReg$'
WARNING: Logging before InitGoogleLogging() is written to STDERR
E0713 21:03:25.037226 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: RCTLog.logIfNoNativeHook()
E0713 21:03:25.037897 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: AppRegistry.runApplication()
E0713 21:03:25.037969 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: RCTDeviceEventEmitter.emit()
E0713 21:03:25.038049 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: RCTDeviceEventEmitter.emit()
E0713 21:03:25.038125 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: RCTDeviceEventEmitter.emit()
E0713 21:03:25.038197 113397760 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: RCTLog.logIfNoNativeHook()
2019-07-13 21:03:25.109 [fatal][tid:main] Unhandled JS Exception: Can't find variable: $RefreshReg$

http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32555:15
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32252:33
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32213:39
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32137:35
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31784:66
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26127:14
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
guardedLoadModule@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:153:47
global code@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:193469:4
2019-07-13 21:03:25.109416+0200 vinz[2258:26060] Unhandled JS Exception: Can't find variable: $RefreshReg$

http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32555:15
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32252:33
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32213:39
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32137:35
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31784:66
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26127:14
loadModuleImplementation@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:250:14
guardedLoadModule@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:153:47
global code@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:193469:4

packages.json :
{
"name": "vinz",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"packager:kill": "react-native-kill-packager",
"packager:reset": "npm start -- --reset-cache",
"packager:restart": "react-native-kill-packager; npm start",
"test": "jest",
"lint": "eslint .",
"fix-xcode": "react-native-schemes-manager all",
"postinstall": "react-native-schemes-manager all"
},
"xcodeSchemes": {
"Debug": [
"Debug",
"IntegrationDebug",
"PreproductionDebug",
"ProductionDebug"
],
"Release": [
"Release",
"Integration",
"Preproduction",
"Production"
]
},
"dependencies": {
"@fleeters/eslint-config-fleeters": "^1.0.0",
"@terrylinla/react-native-sketch-canvas": "^0.8.0",
"color": "^3.1.0",
"lodash": "^4.17.11",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"moment": "^2.24.0",
"native-base": "^2.10.0",
"prop-types": "^15.6.2",
"pushwoosh-react-native-plugin": "^5.12.0",
"react": "16.8.6",
"react-native": "0.60.3",
"react-native-action-button": "^2.8.5",
"react-native-background-fetch": "2.6.0",
"react-native-background-geolocation": "3.0.7",
"react-native-camera": "^1.9.2",
"react-native-checkbox-component": "^1.0.3",
"react-native-code-push": "^5.6.0",
"react-native-linear-gradient": "^2.5.3",
"react-native-map-link": "^2.1.5",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-textfield": "^0.12.0",
"react-native-navigation-bar-color": "0.0.6",
"react-native-paper": "^2.15.2",
"react-native-sideswipe": "^1.4.2",
"react-native-snackbar": "^0.5.3",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.6.0",
"react-native-view-pdf": "^0.8.1",
"react-navigation": "^2.18.3"
},
"devDependencies": {
"@babel/core": "7.5.4",
"@babel/runtime": "7.5.4",
"@react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"babel-plugin-module-resolver": "^3.2.0",
"eslint": "6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.55.0",
"react-native-schemes-manager": "2.0.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

React Native version:
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 202.89 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - /usr/local/bin/node
npm: 5.6.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: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3
npmGlobalPackages:
react-native-cli: 2.0.1

[vincentwuhrlin]

Hello,

after a lot of hours and restart, and comparing with a new application started from scratch with same dependencies added in package.json which working, i think it is the file "package-lock.json".
I removed the "package-lock.json", and with new "node_modules" and cache deleted, it's working... 😃

Maybe this can help some people.

[AndrewJack]

I downgraded metro-react-native-babel-preset from 0.55.0 to 0.54.1 to fix this.

v0.55 includes react-refresh that @NicholasBertazzon mentioned

[kelset]

Nice catch @AndrewJack 👍
So I guess that it's currently happening for people forcefully upgrading their dep to go to 0.55?

Should we fix/lock dep in the dep to it? https://github.com/facebook/react-native/blob/0190c9c97b598b782d677e748d211437b4b85dd1/template/package.json#L19 🤔
I can't remember how ^ behaves with minor releases

[AndrewJack]

@kelset ^ will match the most recent minor version. It'll be safer to lock to "0.54.1" or use ~ to match the most recent patch version.

This may also happen to people installing fresh projects or projects without lock files.

Maybe a mention in the release notes too. Thanks for your help 👍

[valery-lavrik]

I have installed
"metro-reaction-native-babel-preset": "^ 0.54.1",
then executed:
rm -rf node_modules && npm install && cd android / && ./gradlew clean && cd .. && react-native run-android

As a result, anyway I got an error:
Property '$RefreshReg$' doesn't exist, js engine: hermes
Of course this is when enabled Hermes
enableHermes: true

I tried everything
but still getting an error

• rm -rf node_modules
• npm cache clean --force
• npm cache verify
• npm install
• cd android/ && ./gradlew clean
• deleted the application from the virtual device
• react-native run-android

[AndrewJack]

@valery-lavrik remove the ^ from the metro-reaction-native-babel-preset dependency and rm -rf node_modules && npm install.

Then check your lock file to verify you are using v0.54.1 of metro-reaction-native-babel-preset

[valery-lavrik]

@valery-lavrik remove the ^ from the metro-reaction-native-babel-preset dependency and rm -rf node_modules && npm install.

Then check your lock file to verify you are using v0.54.1 of metro-reaction-native-babel-preset

did not help.
I have installed
"metro-react-native-babel-preset": "0.54.1",
deleted package-lock.json completely
then:

• rm -rf node_modules
• npm cache clean --force
• npm cache verify
• npm install
• cd android/ && ./gradlew clean
• deleted the application from the virtual device
• react-native run-android

but the error still remained.
What did I forget?

[AndrewJack]

@kelset it looks like metro-source-map was updated to 0.55 with the hermes commit. It may be causing some issues if it doesn't match the other metro-* dependencies?

https://github.com/facebook/react-native/blame/eec4dc6b7287c5a3536ca18b553e3153a0aba103/package.json#L101

[kelset]

yeah I'll lock all the deps to 0.54.1 for the 0.60-branch. Thanks for helping out 👍

[hamidjafari]

upgrading to 0.60.4 by react-native upgrade solve the problem for me

[nathanlemos]

I'm also getting this issue at Ubuntu enviroment.

My project is currently using:

"react-native": "0.59.10",
"metro-react-native-babel-preset": "0.55.0",

When i try to upgrade react-native to >= 0.60.0 i get the same error message.

I've already tried to reset all caches, delete android and ios folder and re-create them with react-native upgrade --legacy true, downgrade metro-react-native-babel-preset and also tried to use npx, but with no success

[AndrewJack]

Found that [email protected] is needed for hermes to work. A mix of 0.54.1 for metro-react-native-babel-preset & 0.55 for metro-source-map should be ok.

[cpojer]

Yes, we can't lower the version of the metro-source-map package but mixing the newer version of that with other versions of Metro is fine.

[mayursarode4]

react-native start
getting stuck/hangs system by consuming 100% memory at Loading dependency graph... since upgrade to 0.60.4 even fresh app
_react-native init Demo_
_react-native run-android_
Unable to solve this issue since last 2 days please help on it.
Tried above solutions but did not got succeed.

react-native-cli: 2.0.1
react-native: 0.60.4

[AndrewJack]

@mayursarode4 see https://github.com/facebook/react-native/issues/25650#issuecomment-511822738

If you're on node v12.5 or later, downgrading to v12.4 will fix it.

[mayursarode4]

@mayursarode4 see #25650 (comment)

If you're on node v12.5 or later, downgrading to v12.4 will fix it.

Done downgrading the node to v12.4.0, still same issue, still its getting stuck/hang.

[jorgeibarra01]

I just finished upgrading these devDependencies and got the exact same error... Maybe this will help narrow it down?

"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.5.4",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"jest": "^24.8.0",
"react-test-renderer": "16.8.6",
"babel-preset-react-native": "5.0.2",

[Maskedman99]

@kelset am facing this issue on Ubuntu, started 5 days ago after updating

"devDependencies": {
"@babel/core": "7.5.5",
"@babel/runtime": "7.5.5",
"@react-native-community/eslint-config": "0.0.3",
"@react-native-community/eslint-config": "0.0.5", <----------------
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"metro-react-native-babel-preset": "0.55.0", <----------------
"react-test-renderer": "16.8.6"
},
"metro-react-native-babel-preset": "0.55.0",
"react-test-renderer": "16.8.6"

Resetting cache is not working, nor is downgrading metro-react-native-babel-preset to 0.54.1
Please provide a solution

[valery-lavrik]

everything works for me at the moment.
It is necessary to update packages to the latest versions (react-native and metro-react-native-babel-preset)

try to do everything in order:
rm -rf node_modules
npm cache clean --force
npm cache verify
npm install
cd android/ && ./gradlew clean
deleted the application from the virtual device
react-native run-android

[Maskedman99]

I did what @valery-lavrik said and not working, I tried to create a new project and copy the code into the new one

react-native init test
cd test
react-native start
react-native run-android

still getting this error: Can't find variable $RefreshReg$,

package.json:
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"core-js": "^3.1.4",
"react": "16.8.6",
"react-native": "0.60.4"
},
"devDependencies": {
"@babel/core": "7.5.5",
"@babel/runtime": "7.5.5",
"@react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

Emulating on external device Samsung
Updated the packages

npm outdated
ncu -u
npm install

@react-native-community/eslint-config 0.0.3 → 0.0.5
metro-react-native-babel-preset 0.54.1 → 0.55.0

still getting the same error

[garsharm]

In My Case. I am using external android for development.
I tried building for prod and see if it works. It did.
Second, to make it work for dev build, I added
two lines to android/app/build.gradle
project.ext.react = [
+ bundleInDebug: false,
entryFile: "index.js",
+ enableHermes: true,
]
and its working now. no need to play with package file.
Its a issue with hermes and gradle.

Hope it will resolve your issue too.
Cheers!

[mayursarode4]

#25650 (comment)

If you're on node v12.5 or later, downgrading to v12.4 will fix it.

@AndrewJack Thank you so much, it works for me.
As node version > v12.4 has memory issue which hangs the system even with 16GB RAM

[Maskedman99]

Created another new project, and copied the codes and installed the packages to the new one, now it works, the default version of metro-react-native-babel-preset has been changed to 0.54.1,
Don't upgrade "metro-react-native-babel-preset" to 0.55.0
had to update "@react-native-community/eslint-config" to 0.0.5, to make eslint work on VScode.

[imkrishh]

I hope the issue might be with your package manager, please try updating npm package manager to the latest.
npm install -g npm@next

[leosouza28]

In My Case. I am using external android for development.
I tried building for prod and see if it works. It did.
Second, to make it work for dev build, I added
two lines to android/app/build.gradle
project.ext.react = [
+ bundleInDebug: false,
entryFile: "index.js",
+ enableHermes: true,
]
and its working now. no need to play with package file.
Its a issue with hermes and gradle.

Hope it will resolve your issue too.
Cheers!

In my case, this worked too.
I removed my package-lock.json, node_modules, and changed values of enableHermes and bundleInDebug.
Finally, i installed node_modules and executed cd android && ./gradlew clean && cd .. && npm start --reset-cache && react-native run-android.
thanks @garsharm, and all the others.

[xfyre]

Only full cleanup (including package-lock.json) helps to solve this.

[AZhilnikovv]

If someone tried all suggestions with no result - the last thing is to recreate your project in another directory by cloning it from your repo. Only this helped me

[kelset]

It seems that you still need to pin your dependency to the version described above: https://github.com/facebook/react-native/issues/25622#issuecomment-513722801

Because it seems that there is an issue with the react-native init command that ignores the version of metro-* specified in the template.

[OriginLive]

I'm getting these errors too and i've intalled navigation stack and drawer!

[AZhilnikovv]

I'm getting these errors too and i've intalled navigation stack and drawer!

I've encountered this error once more just after upgrading react-navigation from 3.x.x to 4.0.3. And installing react-navigation-drawer and stack didn't help me. I don't know, it seems like npm caches packeges in such a way that npm cache clean --force didn't help me as well. Also switching to yarn didn't help me. Only reinstalling project helped me.
By the way, I'm using win10.
I hope someone can give a solution without reinstalling project.

[CrackyStudio]

I had the same problem, and I solved it by removing my repo and cloning it again. Then npm install, and react-native run-android. I tried all other solutions and none worked for me.
PS: I use metro-react-native-babel-preset 0.56.0 and it works well. I don't know from where that problem come from.
Hope it helps.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.