Hot Reloading is not working

[williamliangwl]

• [ x ] I have reviewed the documentation
• [ x ] I have searched existing issues
• [ x ] I am using the latest React Native version

Hot Reloading is not updating the view in Android device even we have made changes. It happens after a Reload triggered from the device.

I have tested this issue in v0.55.2, 0.54.0 and 0.53.3. The only version that has hot reload still functioning well is 0.53.3, this problem starts occuring from 0.54.0

Environment

OS: Windows 10
Node: 6.11.5
Yarn: 1.3.2
npm: 4.6.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Steps to Reproduce

1. Run react-native init NoHotLoad
2. Run react-native run-android
3. When the project loaded, enable the Hot Reloading
4. Make changes to the App.js, like editing the text. The change should appear in the device.
5. Do Reload on the device
6. Repeat step 4, but the change won't appear at the device. Just a toast of Hot reloading appears.

Another scenario: after installing the app to the device, replace step 2 above with npm start should also reproduces this problem.

Expected Behavior

The Hot Reloading should be able to hot-reload all the changes, regardless number of attempts of reload.

Actual Behavior

The Hot Reloading only works before a Reload action triggerred

[gilbertkaradja]

Same here.

[williamliangwl]

For the mean time, we decided to downgrade to v0.53.3

[gilbertkaradja]

Im not quite sure what changed but my hot-reload just started working again.

[DavidNorena]

I can confirm neither working for ios

[williamliangwl]

@gilbertkaradja do you mean started working even after a Reload happens ? May I know what version are you using?

@DavidNorena thanks for confirming in ios side!

[cihadturhan]

I have 3 different projects with versions 0.51, 0.54 and 0.55. The first project works fine.
I think this happened after a they announced new metro (v0.52 I guess)

You can see detailed bug and debug report the link above. I don't know when there will be a fix, meanwhile, you can use the simple dirty hack I did for my project:

https://gist.github.com/cihadturhan/dda54a25eae398d7db0b06292f0cac9c

[joe-sky]

Same here. I use the Android simulator and react-native v0.54.4, the hot reloading doesn't work after a reload triggered. When I switch to v0.53.3, there is no problem.

[DavidNorena]

@cihadturhan does it really work, HMR and/or Live Reload, with your hack ?

[cihadturhan]

@DavidNorena yeah. Why should I write if it's not working 😄
Keep in mind that you should work with single emulator/phone

[DavidNorena]

Sorry, lol, I haven't test it yet ! lol I write you later and THANKS !

[amcsi]

I'm getting this same issue on Windows 10. Although hot loading does work sometimes, but even then only for a short time before it just stops actually hot loading (despite the toast "Hot Loading..." appearing).

[deboyblog]

Same issue on Windows 10
react-native: 0.55.2
react: 16.3.1

[williamliangwl]

@cihadturhan I tried your dirty hack in v0.55.3 and it works ! Hope this hack can be a real solution in the metro itself ASAP !

@DavidNorena I tried to follow your steps, but the Hot Reloading stops working after a Reload is triggered ( just like this issue's reproduction step ).

Actually what I have tried is by running react-native init and directly test the reproduction steps. I believe the steps from the create-react-native-app should have the same result

[3210jr]

@cihadturhan Thanks, your solution worked for me!

[moshanghan]

@cihadturhan I can't open your link https://gist.github.com/cihadturhan/dda54a25eae398d7db0b06292f0cac9c
can you write down here？

[cihadturhan]

@moshanghan the link is up. Don't know if it's related to your ISP. Anyway here it is:
Filename: react-native/local-cli/server/util/attachWebsocketServer.js

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @format
 * @flow
 */

'use strict';

import type {Server as HTTPServer} from 'http';
import type {Server as HTTPSServer} from 'https';

type WebsocketServiceInterface<T> = {
  +onClientConnect: (
    url: string,
    sendFn: (data: string) => mixed,
  ) => Promise<T>,
  +onClientDisconnect?: (client: T) => mixed,
  +onClientError?: (client: T, e: Error) => mixed,
  +onClientMessage?: (client: T, message: string) => mixed,
};

type HMROptions<TClient> = {
  httpServer: HTTPServer | HTTPSServer,
  websocketServer: WebsocketServiceInterface<TClient>,
  path: string,
};

/**
 * Attaches a WebSocket based connection to the Packager to expose
 * Hot Module Replacement updates to the simulator.
 */
function attachWebsocketServer<TClient: Object>({
  httpServer,
  websocketServer,
  path,
}: HMROptions<TClient>) {
  const WebSocketServer = require('ws').Server;
  const wss = new WebSocketServer({
    server: httpServer,
    path: path,
  });

+  let oldClient = null;

  wss.on('connection', async ws => {
    let connected = true;
    const url = ws.upgradeReq.url;

    const sendFn = (...args) => {
      if (connected) {
        ws.send(...args);
      }
    };

+    if(oldClient){
+      websocketServer.onClientDisconnect(oldClient);
+    }

    const client = await websocketServer.onClientConnect(url, sendFn);
+   oldClient = client;

    ws.on('error', e => {
      websocketServer.onClientError && websocketServer.onClientError(client, e);
    });

    ws.on('close', () => {
      websocketServer.onClientDisconnect &&
        websocketServer.onClientDisconnect(client);
      connected = false;
    });

    ws.on('message', message => {
      websocketServer.onClientMessage &&
        websocketServer.onClientMessage(client, message);
    });
  });
}

module.exports = attachWebsocketServer;

[moshanghan]

@cihadturhan it works ，thanks! In China many links can't be open T_T

[fogil]

This is a show-stopper bug for RN 54+. Hard to believe there can be people using RN 54 and RN 55 without any hot-reload.

[FlorianBergmann]

Is there any word on when this might be fixed? It slows down the development process quite a bit and the issue has existed now for longer than a month. We just updated to the last RN version a few days ago and now we are considering to downgrade again.

[tribou]

@cihadturhan's fix works like a charm.

So if you wish to stay on RN 54+, you can perform an unfortunate but helpful hack until this fix drops:

1. Add @cihadturhan's file above to vendor/attachWebsocketServer.js (or similar)
2. Add a package.json postinstall script:

  "scripts": {
    "postinstall": "cp vendor/attachWebsocketServer.js node_modules/react-native/local-cli/server/util/",

[mortezaalizadeh]

Same problem here on Arch Linux, used to have that before with my Linux Mint and always thought it is an environmental issue. I am on RN 0.55.4

[mgambati]

I'm on RN 0.55 and can't make it work.
@cihadturhan fix is not working here.
Any one got another workaround?

[MWalid]

Same problem, the fix doesn't work

Edit:

I can confirm now, the fix works, I was testing on iPhone and Android emulator at the same time, apparently the hot reloading is meant to work on single device / emulator only, closing the iOS simulator got it to work...

[perryiv]

Using react-native 0.54.4.
The fix worked for me.
Thanks!

[navata]

Current, I have used react-native-0.55.4 and met same this issue.
When I saved my code, I must re-open screen or reload application for updating UI.
I don't know this issue of React-native or other package ?

[Nsengiyunva]

I have tried almost all suggested answers. yarn start --reset-cache to run packager. I removed the node modules folder and did a yarn install again. I tried @rewieer answer. None of these seem to work for me. I am using react native 0.59.8.
I closed all the other vscode windows, then run the packager from git bash terminal and installing too not the vs code terminal but hot reloading just wont work.
This bug is still not solved.

[gaearon]

I'll reopen since I'm working on a new implementation. However I don't know if the problems I'm fixing are related to the problems in this thread. Some of them might be, some of them probably aren't.

I'll close this after I land the new implementation. If you have a problem after the release that contains it, it would be best to create a new issue with a concrete reproducible example and/or video.

For now let's keep it open.

[tpisto]

@gaearon Would the new HMR work also with the good old create-react-class?

[gaearon]

Yes (but it would remount the edited component). In the new implementation, we only support preserving state for the edited components for functions with Hooks. Supporting it for classes without subtly altering semantics and making the feature fragile is too difficult.

Btw I'd appreciate if people could start making small isolated example projects where hot reloading doesn't work. Like maybe you use some navigation library where it breaks. They would be helpful so I can debug them.

[EduVencovsky]

In android, when I press Ctrl + S it shows the android toast with Hot Loading... But it doesn't change anything. Only when I manually reload it (and the green bar on the top appears), it changes.

When I enable live reloading, one weird thing happens. In the metro bundler, after the first loading, it always shows 100.0% (1/1), done. like if there are no changes.

I'm using react-native 0.59.3

[chuttam]

@gaearon - Here is a tiny project (essentially the result of react-native init) that replicates the issue.

https://github.com/chuttam/react-native-hotreload-issue18899

The project's README has specific instructions for replicating the Hot Reloading malfunction. As @jsslai and @cdreier confirmed, changing the root component from a class to a function component triggers the issue.

[gaearon]

The new implementation has landed in master! We're calling it Fast Refresh.

You can see a demo of Fast Refresh here: https://mobile.twitter.com/reactnative/status/1144629612921720833

Note: We expect it to be available in 0.61. (Not 0.60.)

I'll leave this issue open until I verify that it indeed solves the reproduction cases posted in this thread.

---

@EduVencovsky Sorry, this isn't helpful without a reproducing project.

@chuttam Thanks for a repro case. I will check whether my changes fix it. (I expect them to).

If anyone has more reproducing cases, now is the time to post them.

[gaearon]

If you have any concrete cases that are still broken please post reproducing examples with instructions in this thread. This is your chance to see them fixed.

[robertpaul01]

I'm not sure if this case has been addressed, but I have encountered problems with using base component classes. This happens if you create a BaseComponent that extends Component or PureComponent and then extend that BaseComponent to create your screens. With hot reloading enabled, making a change and then saving will pop the Hot Loading... message, but the content will not update.

Here is an example: https://github.com/RobertPaul01/HotReloadTest/blob/master/App.js

[gaearon]

Just checked that this is fixed.

(But you probably should avoid creating component inheritance hierarchies.)

[cdreier]

Hi, i just tested with 0.60.0-rc.3 (i think this is the correct version?), and still having the same issue as described in my comment above

#18899 (comment)

Repo: https://github.com/cdreier/rn-fast-refresh/blob/master/App.tsx

This is not a big issue, with a class component as root everything is working very well. But if this intended, it should appear somewhere in the docs?

[gaearon]

@cdreier 0.60 is not going to contain any of these fixes, sorry. You're still testing the old implementation. Fast Refresh is slated for 0.61. There isn't an easy way for you to test it yet, unfortunately, but I can try your test case later. Thanks for making it!

[nathsimpson]

Also, make sure you don't have an index.lock file in your .git directory :) Deleting it could solve your issue.

[aminy]

In android, when I press Ctrl + S it shows the android toast with Hot Loading... But it doesn't change anything. Only when I manually reload it (and the green bar on the top appears), it changes.

When I enable live reloading, one weird thing happens. In the metro bundler, after the first loading, it always shows 100.0% (1/1), done. like if there are no changes.

I'm using react-native 0.59.3

I have the exact same issue on 0.59.10
any solutions or workarounds?

[femartin]

I just uninstalled EXPO from my Android device and reinstall it and now is working again ok.

[DaniAkash]

Is there any test versions available for me to check if fast refresh can solve the issue in my project? @gaearon

[eduardopelitti]

Starting a fresh project with RN 0.60.4, all components (base views and children) are functional, and Hot Reloading is not working for me in iOS simulator.

I get the error "Unable to change the getter of an unconfigurable property" in the red screen.

Live Reload reloads correctly when changing a text in a screen, Hot Reload displays the error. Manually reloading works properly.

const Search = () => {
  return <Text>Hello</Text>
}

I've been searching issues for the past few hours to no avail. Any clues?

Making the component class based solves the issue.

Setup:

OS: macOS Mojave
Node: 10.15.0
Yarn: 1.12.3
npm: 6.4.1
Watchman: 4.9.0
Xcode: 10.3
Android Studio: N/A

Packages:

{
    "bugsnag-react-native": "2.22.4",
    "flat": "4.1.0",
    "hoist-non-react-statics": "3.3.0",
    "i18next": "17.0.7",
    "lodash": "4.17.15",
    "patch-package": "6.1.2",
    "prop-types": "15.7.2",
    "react": "16.8.6",
    "react-i18next": "9.0.10",
    "react-native": "0.60.4",
    "react-native-code-push": "5.6.1",
    "react-native-config": "0.11.7",
    "react-native-device-info": "2.3.2",
    "react-native-localize": "1.1.4",
    "react-native-navigation": "3.0.0-alpha.8",
    "react-native-notifications": "2.0.3",
    "react-redux": "7.1.0",
    "redux": "4.0.4",
    "redux-logger": "3.0.6",
    "redux-persist": "5.10.0"
  },
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/runtime": "7.5.5",
    "@emotion/core": "10.0.15",
    "@react-native-community/eslint-config": "0.0.5",
    "@storybook/addon-actions": "5.1.11",
    "@storybook/addon-links": "5.1.11",
    "@storybook/addons": "5.1.11",
    "@storybook/cli": "5.1.10",
    "@storybook/react-native": "5.1.11",
    "@storybook/react-native-server": "5.1.11",
    "babel-eslint": "10.0.2",
    "babel-jest": "24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-root-import": "6.4.1",
    "emotion-theming": "10.0.14",
    "eslint": "6.1.0",
    "eslint-config-airbnb": "17.1.1",
    "eslint-config-prettier": "6.0.0",
    "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
    "eslint-plugin-babel": "5.3.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.2",
    "eslint-plugin-react-hooks": "1.7.0",
    "eslint-plugin-react-native": "3.7.0",
    "husky": "3.0.2",
    "jest": "24.8.0",
    "jetifier": "1.6.4",
    "lint-staged": "9.2.1",
    "metro-react-native-babel-preset": "0.55.0",
    "pre-commit": "1.2.2",
    "react-dom": "16.8.6",
    "react-native-storybook-loader": "1.8.0",
    "react-test-renderer": "16.8.6"
}

[ancyrweb]

Just installed RC 0.61.0 with FastRefresh.
Before, functional component would reset the entire navigator. Now it just refreshes the component.
A huge win for me, thanks @gaearon !

[gaearon]

Known issues with hot reloading have been fixed in 0.61.
The feature is a complete rewrite and is now called "Fast Refresh".

The 0.61 RC0 still has some issues (redbox not appearing) that will be fixed in the final 0.61 release.

I'm going to close and lock this issue to prevent further confusion.
If you have issues in React Native 0.61 with Fast Refresh, please file a new issue and ping me.

Note: React Native 0.61 will be out soon.

[gaearon]

You can try React Native 0.61 RC 3 which should be representative of what will go out as stable.