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]

⚠️	Missing Environment Information
ℹ️	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]

⚠️	Missing Required Fields
ℹ️	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.

[gabimoncha]

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.

[SrBrahma]

My Fast Refresh stops working randomly after some time. In the pasts month I used to reopen the app, run npm start again, run npm run android again... After some tries and some anger the Fast Refresh would work again.

I found out that in my VsCode it may starts working again if I run node in its terminal and close it. May need to do it a few times. It's a faster way to fix it, as I may need to do it 3-4x per day.

[6lueparr0t]

@Orange9000 it's work for me! Thx.
I just typed
sudo npx react-native start
but I don't know how is it working.. and I want to truly solved this problem.

only working 0.61.5

here's my environment.

  System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 247.05 MB / 8.00 GB
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 Canary 16 4.2 Canary 16
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.1 - /usr/local/opt/openjdk/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: ^4.13.1 => 4.13.1 
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: ^0.63.4 => 0.63.4 
  npmGlobalPackages:
    *react-native*: Not Found

[danihazler]

Just want to follow up this thread as I'm having the same issue
sudo npx react-native start worked for me, but I think we should not need to use sudo

[firdausious]

Facing same issue on v0.64.0-rc.2 as well with run-ios

here's my env

  System:
    OS: macOS 11.0.1
    CPU: (8) arm64 Apple processor
    Memory: 73.06 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
  Binaries:
    Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v15.8.0/bin/yarn
    npm: 7.5.1 - ~/.nvm/versions/node/v15.8.0/bin/npm
    Watchman: 4.9.0 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
    Homebrew: 3.0.0 - /opt/homebrew/bin/brew
    pip3: 21.0.1 - /opt/homebrew/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1200.0.32.29 - /usr/bin/clang
    FFmpeg: 4.3.1 - /opt/homebrew/bin/ffmpeg
  Virtualization:
    Docker: 20.10.1 - /usr/local/bin/docker

[Piteraguayo]

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

[smanzini]

hi all, same issue for me RN 0.64, metro-bundler has never been launched automatically anymore.
Now I need to do it manually via command npx react-native start.
Don't know why... I'm going to try some hints from you guys.

[smanzini]

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

[Kernael]

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

[Piteraguayo]

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

Hi @smanzini sorry I did not see your message before. If you are on Mac, maybe it's not showing the extension :)
Or maybe you are on Windows and the index has not extension on git folder. You can try to delete "index" (making a copy of the entire folder of your project before) and try if the fast refresh works.

[jaquinocode]

Note: If you're like me, Fast Refresh might technically work for you (a message saying 'Refreshing...' shows up when you do a code change), but the entire app reloads on the code change. This is because Fast Refresh will fall back to a full reload of the app in some cases.

To fix this, see this thread. The naming fix shown there fixed my problem.

[stale]

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.

[BruceSuperProgramer]

See my thread #32001 (comment)

[andrewjmathers]

Sorry if this is an off topic note on this issue, but it may save someone's day. I had an issue with react-native debugger and fast refresh - debugger simply wouldn't launch no matter what and fast refresh would throw a note that it's refreshing, but content changes didn't go through. After a day of playing hide and seek with version control to figure out when and where things went wrong I found that the issue was with calling my sidebar component in react-navigatior (see image attached)

I'm still a bit puzzled as of why it had such a significant impact on metro bundler, but that's what broke and fixed it for me.

[amberv0]

@BruceSuperProgramer , that was it, OMG! I'm not even sure why I had that "resolutions" part in my package.json - must have been something needed in the previous project.

[KrushnaNaghate]

I'm facing a problem, my app is working very slowly, tap happens after 3-4 seconds, I'm using the socket in my app as it's based on the stock market.. my app works slowly, should I try the above solutions

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.