react-native: 0.62 Fast Refresh doesn't work

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!

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 13
  • Comments: 37

Most upvoted comments

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

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).

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.

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

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

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?

This can help someone : https://stackoverflow.com/questions/63788454/fast-refresh-in-react-native-always-fully-reload-the-app

TL;DR: don’t use default exports with no name for the components

After trying some of the solutions, only rm -rf .git/index.lock worked for me. Don’t know the absurd reason.

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. Screen Shot 2020-05-14 at 4 00 01 PM

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?

After trying some of the solutions, only rm -rf .git/index.lock worked for me. Don’t know the absurd reason.

@Piteraguayo cannot find index.lock in my .git folder, I’ve got index and not index.lock

@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)

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)

@Orange9000 that didn’t help me

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