Fast refresh not working in React Native 0.64.2

Description

Fast refresh is not working in React Native 0.64.2. I have created the most barebones out of the box setup I could.

When I have the app running and I save a file, I expect to see the changes refreshed and visible in the app.

What is actually happening is that I need to stop and restart Metro to see the changes I have made.

I followed the environment setup instructions - opting to create a brand new project following the React Native CLI Quickstart path.

I also ensured that I do not have the react-native cli tool installed globally. This project is using the latest stable version of React Native (0.64.2).

React Native version:

Running npx react-native info yields the following:

System:
    OS: macOS 11.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.92 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - ~/.nvm/versions/node/v15.4.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 7.0.15 - ~/.nvm/versions/node/v15.4.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0
      System Images: android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7199119
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_265 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.2 => 0.64.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

You will need:

• Node v15.4.0
• nvm to easily switch between node versions
• CocoaPods v1.10.1
• Xcode 12.5.1

1. Clone this repository
2. Run the command nvm use to switch to the version of node that we need.
3. Install yarn dependencies with yarn
4. Install cocoapods dependencies with pod install --project-directory=ios
5. Start the Metro bundler with yarn start
6. Start Xcode, then open the project by loading ios/FastRefresh.xcworkspace
7. Press the play button in Xcode to build and run the project.

Expected Results

When I edit some text in App.js, I would expect to see the changes appear in the running instance of the app.

Link to example repository

I have created a simple example app to demonstrate the issue => https://github.com/matfin/rn-fastrefresh-bug

[knro]

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.

[Yrsafam]

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