React-native: 0.62 Fast Refresh doesn't work

[daheeahn]

I used this command
npx react-native run-ios

When I run react-native and I edit some codes, fast refresh doesn't work.
instead, I can see downloading javascript bundle.

please check this issue!

[label-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[romanakash]

Might be related to this #27029

[label-actions[bot]]

:warning:	Missing Required Fields
:information_source:	It looks like your issue may be missing some necessary information. GitHub provides an example template whenever a new issue is created. Could you go back and make sure to fill out the template? You may edit this issue, or close it and open a new one.

[ethanyuwang]

same issue here, normal refresh doesnt work either

[justindmyers]

I just looked through the other thread and this seems to be specific to RN 0.62 for me as well.

Fast refresh is not working with the debugger on or off. With React Native Debugger running, I can see the correct code, but the iOS simulator is not showing any updates. So it looks like this specific issue isn't with RN debugger like #27029

The fast refresh banner is showing after a save, but that's it, nothing on the screen is updated unless I reload the entire app.

I verified that the bundle itself is updating at: http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false. So the code changes are being reflected in the bundle but the device is not using the new bundle for some reason.

I tried everything else I could from the other thread. I updated XCode to the latest version. Cleaned/wiped all simulators. Upgraded all libraries. Ran react-native-clean-project and still nothing. The fast refresh simply isn't using the latest bundle.

Here's an update showing how the console is outputting something different than what's in the code itself.

[gabrielmoncea]

For me the solution was rm -rf .git/index.lock

[stephenmcbride]

Also facing this issue after upgrading to 0.62 and can confirm it is not fixed by upgrading to the latest 0.63 release either. Have tried every suggestion in the linked threads but file changes are never detected and pushed to the app.

[Yarkhan]

I've came across the same issue on 0.62 and 0.63 and found a fix by starting the packager in the default terminal instead of VSCode. Maybe the problem is in VSCode?

[gazedash]

For me I have a problem that fast refresh is shown disabled, but in fact it is enabled...
And it eats all of the resources of my system
This problem appeared in 63.2

[Orange9000]

In my case, not only the fast refresh didn't work, but the regular reload as well - all the code remained the same up until I restarted packager with --reset-cache option and rebuilt the app (both on iOS and android). And of course, I tried rebooting multiple times, clearing all kinds of caches and cloning repos, everything with no success.
The problem occurred when I upgraded my RN from 0.59.5 to 0.63.0.

Sadly, for now, my only solution is to downgrade RN to 0.61.4 where fast refresh and regular reload started working again.

What's interesting, the same cloned repo with RN 0.63.0 had no issues on another machine and the only notable differences between that machine and mine is that it has slightly higher versions of macOS and xCode.

UPD: A minor clarification: restarting the packager and reopening an app on the device updated for the latest code changes (no app rebuilding was required). Still, that is quite tedious.

UPD2: Tried running the app with watchman logging watchman --server-encoding=json --persistent log-level debug > debug.log and found out that it detects all the changes I make to app files immediately. Thus, I presume this is not the watchman issue, but perhaps metro's?

[Jm-Zion]

I found that using why-did-you-renderpackage along with react-native breaks the fast-refresh...

[Orange9000]

I was finally able to get at least regular reload working by running bundler with sudo option in a separate terminal window like this: sudo npx react-native start --reset-cache
and then running either ...run-android or ...run-ios in another terminal window

Why did this issue occur only on my machine is still a mystery (tried running project on couple of other Macs and everything was fine).

[gazedash]

@Orange9000 that didn't help me

[filipenatanael]

I was facing this issue few minutes ago, I managed to get it work by following the instructions below

• Disable the firewall or adjust the permissions there
• Run: adb kill-server && adb start-server
• Run: adb -s YOUR_DEVICE_ID reverse tcp:8081 tcp:8081

Also, I tried rm -rf .git/index.lock but didn't help me on my especifically situation

[xfyre]

I'm experiencing a similar issue on 0.63, but in my case any JS update triggers the full bundle reload (instead of just fast refresh)

[farshed]

Experiencing the same problem on 0.63.2. Fast refresh rarely works and JS bundle reloads are randomly triggered. Also, when this happens, the bundle is reloaded multiple times instead of just once. Only happens on Windows. Works fine on macOS.

EDIT:
Installing Watchman and adding its path to env variables solved it for me. This needs to be added in the docs.

[WJimmyCook]

What worked for me was adding loose: true to plugin-proposal-class-properties

module.exports = {
  ...
  plugins: [
    ...
    ['@babel/plugin-proposal-class-properties', { loose: true }],
  ],
};

[iamdavidmartin]

@xfyre did you get it fixed? i'm having the same problem you are.

[xfyre]

@iamdavidmartin Not really; but im my case this behavior is probably caused by shadow-cljs logic (shadow-cljs recompiles the index file every time, which forces the bundler to do a full reload)

[iamdavidmartin]

@xfyre fast refresh hasn't worked for me for months. i tried all the advice in all the threads i could find and it did not work.

this morning i installed some osx updates and to my complete surprise, it's working now. maybe the reboot after i tried everything helped.