Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fast refresh not working in React Native 0.64.2 #32001

Closed
matfin opened this issue Aug 11, 2021 · 44 comments
Closed

Fast refresh not working in React Native 0.64.2 #32001

matfin opened this issue Aug 11, 2021 · 44 comments
Assignees
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@matfin
Copy link

matfin commented Aug 11, 2021

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:

  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

@matfin
Copy link
Author

matfin commented Aug 11, 2021

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.

@jgolden
Copy link

jgolden commented Aug 17, 2021

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 (#29912 (comment)) which was fixed in 0.64. Now you need to go in the debug menu and turn it on using "Enable Fast Refresh".

@matfin
Copy link
Author

matfin commented Aug 18, 2021

@jgolden thanks for the feedback. I tried that and it didn't work.

Inside the running simulator (from XCode), I open the developer menu and disable then re-enable fast refresh.

I then edit a file.

What I would expect to see is that the running app refreshes (and I see a message to that effect inside the console).

What I actually see is that there are no changes registered, and I need to kill yarn start --reset-cache and run it again to see my changes.

@ylkhayat
Copy link

ylkhayat commented Aug 18, 2021

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

@matfin
Copy link
Author

matfin commented Aug 18, 2021

I saw that a lot of people suggested this, and that it had fixed the problem for them (but they didn't know why).

In my case, I do have an index file but I don't have an index.lock file inside the .git directory at the root of the project.

I'm running the latest version of MacOS (11.5.1)

@ylkhayat
Copy link

ylkhayat commented Aug 18, 2021

I forgot to mention that running the command regardless of whether the file exists or not sometimes fixes the issue as well. It is really weird how it sometimes triggers the refresh to work.

However, my opinion concerning this is an uneducated one but I would gladly share it up next. I believe that modifying the .git directory or attempting to mess with it triggers a tree diff which by its turn triggers a change/event in the "Fast Refresh".

If this did not help, you could try to check watchman config if you have its setup. One other command I sometimes use is

watchman watch-del-all

@projectnetworld
Copy link

also happens in 0.65.1 please help with this issue

@knro
Copy link

knro commented Sep 21, 2021

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.

@projectnetworld
Copy link

@mikehardy HI

can you please help us with this issue due to this issue I cannot upgrade to the new version!

@mikehardy
Copy link
Contributor

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

@projectnetworld
Copy link

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

thank you so much you were right the problem was the Nodejs v16 I migrated to the LTS 14 and I have no problems anymore :)

@sohail-dragon
Copy link

sohail-dragon commented Nov 4, 2021

Hey, have the same issue in 0.65.1. Wasn't having any issues on 0.64.2. Tried going to 0.66.1 but didn't help unfortunately. Would appreciate any help. So far we've tried:

Node 14 ❌
React cli update ❌
Running with sudo ❌
Using react 17.0.1 ❌
Using 0.66.1 ❌

@knro
Copy link

knro commented Nov 4, 2021

I can confirm this is an Android specific issue. On iOS, the refresh is OK. Unfortunately, this lead to many hours of wasted work to reload the whole app to test a simple change on Android :(

@mikehardy
Copy link
Contributor

mikehardy commented Nov 4, 2021

Something more subtle is going on I think. I just tested fast refresh on Android and it worked for me just now.

Dependencies are largely what you get stock from luna template https://github.com/plaut-ro/luna - if you try a `npx react-native init FastRefreshNativeAndWeb template=plaut-ro/luna you should successfully fast refresh on all three platforms

This was using node v14.18.1 if that matters, Android API30 emulator


  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/material-top-tabs": "^6.0.2",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "@types/react-native-vector-icons": "^6.4.9",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "0.66.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-pager-view": "^5.4.8",
    "react-native-safe-area-context": "^3.3.0",
    "react-native-screens": "^3.9.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "^0.17.5"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/runtime": "^7.16.0",
    "@react-native-community/eslint-config": "^3.0.1",
    "@types/jest": "^27.0.1",
    "@types/react": "^17.0.19",
    "@types/react-native": "^0.66.1",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.3.0",
    "@typescript-eslint/parser": "^5.3.0",
    "babel-jest": "^27.3.1",
    "babel-plugin-react-native-web": "^0.17.1",
    "customize-cra": "^1.0.0",
    "eslint": "^7",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "metro-react-native-babel-preset": "^0.66.2",
    "pod-install": "^0.1.28",
    "prettier": "^2.4.0",
    "react-app-rewired": "^2.1.8",
    "react-scripts": "^4.0.3",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.2"
  },
  "resolutions": {
    "@types/react": "^17"
  },

@knro
Copy link

knro commented Nov 6, 2021

That's great, but how would this help us with existing projects fix this issue?

@mikehardy
Copy link
Contributor

mikehardy commented Nov 6, 2021

It does not help you directly, but what it shows you is that it is possible. What that usually means to me, when react-native troubleshooting, is that I start looking for project differences between projects to isolate the issue (and I posted a project init template: so it's easy to crank out a project for comparison), I stop hoping something magical will happen on a react-native issue. Stated differently: It might help you focus your troubleshooting effort where it is likely to be more effective. Frequently just knowing where the issue is (my project? react-native? some native library?) is the vital thing to know in order to then really solve the thing.

That was my goal. Hopefully it was helpful.

@tehong
Copy link

tehong commented Nov 8, 2021

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.

@mikehardy
Copy link
Contributor

Oh that is subtle! More subtle then I was thinking. As test results, I can say I always run yarn start (equivalent of npx react-native start - to start the bundler manually) when I'm working. So I fall in to your test cases of "fast refresh works", and it does work for me. However, I still do not replicate the failure result. I just killed my manually-started bundler, and let yarn android (same as npx react-native run-android) do it's thing which opened a new Terminal.app instance with the bundler in it, and I still successfully fast refreshed.

So there is something more subtle even going on, about the default terminal, somehow.

Very odd but perhaps closer to results

@Yrsafam
Copy link

Yrsafam commented Nov 10, 2021

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

@mikehardy
Copy link
Contributor

This will likely result in no change, however you may like npx react-native-clean-project (https://github.com/pmadruga/react-native-clean-project) which packages up everything you did plus cleans out a few other hard to reach places, without having to remember all of them (or learn new ones as they come up). Probably will not solve your problem but is a nice trick to have

@lugodchristian
Copy link

This resolve my issue

  • Running packager on different port react-native start --port 8084 --reset-cache
  • Run react-native run-android --port 8084

@Yrsafam
Copy link

Yrsafam commented Nov 17, 2021

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

@sohail-dragon
Copy link

Hey, have the same issue in 0.65.1. Wasn't having any issues on 0.64.2. Tried going to 0.66.1 but didn't help unfortunately. Would appreciate any help. So far we've tried:

Node 14 ❌ React cli update ❌ Running with sudo ❌ Using react 17.0.1 ❌ Using 0.66.1 ❌

Update: tl;dr I fixed this by updating @react-native-community/cli, @react-native-community/cli-platform-android and @react-native-community/cli-platform-ios to 6.1.0.

I previously tried updating but it didn't work, I then noticed I had a damn yarn resolution overriding the package (because of a CVS vulnerabilities in one of the nested libraries). Removing the resolution and updating the cli fixed it for me. Probably not what's affecting the rest of you but maybe it serves as a reminder to check your yarn resolutions.

@BruceSuperProgramer
Copy link

BruceSuperProgramer commented Jan 31, 2022

0.67 also have this problem on IOS. I created a fresh new project with react-native init command found 0.67.1 working fine with fast fresh in this project. Fast fresh only not working from the project which upgrade from 0.62 to 0.67.1. I guess some configuration in my project might break the fast fresh. But I don't know where is it.

@BruceSuperProgramer
Copy link

BruceSuperProgramer commented Feb 3, 2022

I just initialised a new RN project with 0.67.1 RN version. And copied most of lib dependencies from my project package.json to the new one I just created. I found new app running fine till I paste resolution to it
Screen Shot 2022-02-03 at 11 30 00 am

I found after resolution added fast refresh stoped working. Then I found server throw out a message "Could not reload the application after an edit." After search these key words found it throw from metro.
Screen Shot 2022-02-03 at 11 31 44 am

Added some console.log inside this function found Refresh was undefined. Then I checked metro version in node_modules/metro/package.json found it was 0.59. Before I add resolution part, the version of it was 0.62 now it was downgraded to 0.59 and fast refresh stoped working. Then I confirmed resolution somehow broken fast fresh. But without resolution added, few libs stopped working then I upgraded those 3rd party lib's version then my app running again with fast fresh working properly.

@rafaelmaeuer
Copy link

I had the same issue on Android after upgrading @react-native-community/cli-platform-android to 7.0.1, reverting back to 6.2.0 fixed it for me using React-Native 0.66.4...

@Alex1899
Copy link

Alex1899 commented Apr 3, 2022

having this issue on react native 0.66.4

@mikehardy
Copy link
Contributor

I may be wrong, but I don't think - for reporting / tracking react-native issues - there is any value at all in reporting status of an issue against old releases. Testing / reproducing against whatever the current stable release at the time is, has value.

@russeg
Copy link

russeg commented Apr 19, 2022

I've had this issue for so months now.

The solutions on this thread is kinda ridiculous. Why so many solutions for a single problem? NO ONE seems to know what causes it, or why the solution fixes it. Insane.

Looks like fast refresh is affected by multiple issues. Unfortunately, NO ONE KNOWS anything.

@mikehardy
Copy link
Contributor

@russeg I look forward to your detailed analysis so that we may all finally know something

@rafaelmaeuer
Copy link

Updating to RN 0.68.0 fixed the issue for me, while using @react-native-community/cli-platform-android v7.0.1 again...

@russeg
Copy link

russeg commented Apr 22, 2022

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

@mikehardy
Copy link
Contributor

The community generally is going to have to figure it out by trial and error when there is no reproduction case proposed for current versions. That's where it's at if I'm not mistaken. I can't reproduce it

@mordechaim
Copy link

mordechaim commented Apr 28, 2022

In case this might help anyone: Samsung DeX!

Samsung DeX runs a daemon on localhost:8081 which interferes with Metro. Stopping the daemon from the system tray solved all issues.

@Dajust
Copy link

Dajust commented May 26, 2022

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 😅

@BismarkCodes
Copy link

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 (#29912 (comment)) which was fixed in 0.64. Now you need to go in the debug menu and turn it on using "Enable Fast Refresh".

This worked for me in react-native 0.69.0

@badeggg
Copy link

badeggg commented Oct 21, 2022

Although it's really weird, I have to discuss that, things work after I brew uninstall watchman in my case. Hope my case can supply some useful info. Some background: a) I'm pretty new to RN; b) after remove watchman, which watchman produce nothing; c) mac os / ios d) react-native version "react-native": "0.70.3"

@sajinmp
Copy link

sajinmp commented Feb 23, 2023

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.

@brsaylor2
Copy link

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

@fummeys
Copy link

fummeys commented Jul 11, 2023

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

Thanks alot. This works for me

@chaoky
Copy link

chaoky commented Jan 10, 2024

:set noswapfile

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

@alexsoul95
Copy link

alexsoul95 commented Jan 16, 2024

Lost about 4 hours, digging in old project, both android/ios hot reload weren't working, it was refreshing but without updates. The problem was:


function RegistrationNewPasswordScreen(props) {
  return registrationNewPasswordScreen(props);
}
return (
      <Stack.Screen
              name="RegistrationNewPassword"
              component={RegistrationNewPasswordScreen}
              options={{ headerShown: false }}
      />
)

Only God knows why previous developer was doing like this. But passing component inside like this was breaking hot-reload.
Maybe it will help someone.

Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 15, 2024
@react-native-bot
Copy link
Collaborator

This issue was closed because it has been stalled for 7 days with no activity.

@react-native-bot react-native-bot closed this as not planned Won't fix, can't repro, duplicate, stale Jul 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests