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
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 windowWhy 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
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.
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?@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-render
package along with react-native breaks the fast-refresh…