react-native: Fast refresh not working in React Native 0.64.2

This is still broken in 0.65.1… I have to reload the metro to see any changes. It says “refreshing” but no actual changes are reflected.

I am having similar problems.

I’m on the latest RN 0.66.2 => the Metro Bundler is not able to dynamically perform Fast Refresh bundle to the iOS simulator and Android emulator when started in MacOS default terminal in a normal way.

NOT WORKING

1. When running npx react-native run-ios or npx react-native android, the Metro bundler automatically starts in the MacOS default terminal => the Fast Refresh doesn’t work.
2. When manually run npx react-native start in the MacOS default terminal and then run the run-ios/run-android commands => The Fast Refresh doesn’t work.

WORKING

1. When manually run sudo npx react-native start --reset-cache in a new MacOS default terminal => The Fast Refresh work correctly.
2. When manually run npx react-native start in a new iTerm2 window => The Fast Refresh work correctly.

In any case, the easiest workaround for me is just to keep an iTerm2 window running Metro Bundler all the time for the root project I am on.

You can access your debug menu to check whether it is enabled or disabled. If you have your “Fast Refresh”, then it sometimes glitches according to your workspace setup and memory consumption. Therefore, continue reading the next section.

Read Carefully! Do not just run the command!

There’s a workaround I sometimes use if the workspace is managed by git but take extra good care while using this as you might mess up your git tree. Here’s a short description about “What is a Git index.lock file?” Run the following command from your project root as it sometimes helps to refresh your workspace (not always) and then resave any of your files.

rm ./.git/index.lock

@mikehardy Why, I’m not the RN expert here. You seem to be, you should know right?

I mean, you don’t ask a medical intern to diagnose an issue and try to solve it by themselves by trial and error, when the resident physician is there to help. If the resident don’t know, they get help from the attending physican.

I hope you get my point. People where don’t know, doing it by trial and error, suggesting solutions that might not really work. While the resident RN experts seem to not know too, and should raise this issue to the people further up who SHOULD know.

But If this is how things work here (ie let the community figure it out by trial and error, hoping something will fix it) then fine i guess 😂😂

A few days later I found out what caused it. I am using mobx 6 on a project and the documentation states what needs to be added to babel.config.js is(@babel/plugin-proposal-class-properties):

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [['@babel/plugin-proposal-class-properties', {loose: false}]],
  ],
};

As soon as I remove the connection of this plugin, everything starts working normally. At the moment I don’t understand how this affects metro and how I can still use the specified plugin. I tried to make various configurations.

it is also worth paying attention to this comment

:set noswapfile

this works, but why, what’s the interaction between watchman, swap files and fast refresh? these things seem completely unrelated to me

:set noswapfile in Vim also seems to fix it for me. Thanks for that tip!

I was seeing fast refresh not working when going from react-native 0.63.3 to 0.64.0. Turned out the issue was 0.63.3 used to have fast refresh always enabled by default because of a bug (https://github.com/facebook/react-native/issues/29912#issuecomment-822825875) which was fixed in 0.64. Now you need to go in the debug menu and turn it on using “Enable Fast Refresh”.

I faced this issue yesterday. Took some time to find out that it was because of the swap file that gets created on edit.

Disabling the swap file solved the problem for me. Unsure if it’s relevant.

Now you need to go in the debug menu and turn it on using “Enable Fast Refresh”.

I can’t believe such a stupid-simple solution was my problem, thanks @jgolden 😅

I am experiencing a similar problem. All methods have already been tried. Cleaned gradle, metro-cache, watchman, npm-cache. Reinstalled npm dependencies. I think I got this bug after I wanted to make hermes debugger for flipper work by running the npm run start --host localhost command. In my case, console.log output does not occur, http requests do not work, fast-refresh does not work. Everything was fine until today. All of the above methods have been tried and not only they - unsuccessfully.

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 7.26 GB / 15.96 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.23.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5900203
    Visual Studio: Not Found
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.64.2 => 0.64.2
    react-native-windows: 0.64.19 => 0.64.19
  npmGlobalPackages:
    *react-native*: Not Found

I have no involvement in this issue @projectnetworld why did you tag me? Either way, I just happened to have the react-native-permissions example up while testing something else and it happens to be based on react-native 0.64.2 at the moment. I just altered some text on the example app screen and it fast-refreshed.

So I can’t reproduce on react-native 0.64.2

Not sure if the “requires node v15.xx” is strict for this issue, as I’m using node 14.17.6, perhaps that is a difference

Just to add to this, if I run with sudo:

sudo yarn start --reset-cache

Then fast refresh works. If I do not, then fast refresh doesn’t work.