React-native: Hot Reloading is not working

Created on 17 Apr 2018 · 123Comments · Source: facebook/react-native

[ 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

Run react-native init NoHotLoad
Run react-native run-android
When the project loaded, enable the Hot Reloading
Make changes to the App.js, like editing the text. The change should appear in the device.
Do Reload on the device
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

Bug DX Follow Up Regression JavaScript 📦Bundler

Source

williamliangwl

👍94 👀2 😕2

Most helpful comment

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

cihadturhan on 8 May 2018

👍55 🎉17 ❤16 😄6 👎6 😕4 🚀3

All 123 comments

Same here.

gilbertKaradja on 18 Apr 2018

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

williamliangwl on 18 Apr 2018

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

gilbertKaradja on 18 Apr 2018

I can confirm neither working for ios

DavidNorena on 18 Apr 2018

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

williamliangwl on 19 Apr 2018

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

cihadturhan on 20 Apr 2018

👍18 🚀2 ❤2 🎉1 😄1 👎1

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.

joe-sky on 23 Apr 2018

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

DavidNorena on 23 Apr 2018

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

cihadturhan on 23 Apr 2018

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

DavidNorena on 23 Apr 2018

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).

amcsi on 23 Apr 2018

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

deboyblog on 24 Apr 2018

@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

williamliangwl on 26 Apr 2018

@cihadturhan Thanks, your solution worked for me!

3210jr on 29 Apr 2018

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

moshanghan on 8 May 2018

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

cihadturhan on 8 May 2018

👍55 🎉17 ❤16 😄6 👎6 😕4 🚀3

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

moshanghan on 8 May 2018

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.

fogil on 17 May 2018

😕6

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.

FlorianBergmann on 22 May 2018

👍9

@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)
1) Add a package.json postinstall script:

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

tribou on 7 Jun 2018

👍8

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

mortezaalizadeh on 23 Jun 2018

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

mgambati on 28 Jun 2018

👍3

~~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...

MWalid on 30 Jun 2018

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

perryiv on 2 Jul 2018

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 ?

navata on 12 Jul 2018

Refer to this article : https://www.skptricks.com/2018/07/enable-hot-reloading-in-react-native.html

skptricks on 15 Jul 2018

👎7

Same here using react-native-0.55.4

lmichailian on 19 Jul 2018

It is very simple. Just sharing link, it will help you to enable hot
reloading in react natve.

Link :
https://www.skptricks.com/2018/07/enable-hot-reloading-in-react-native.html

On Thu, Jul 19, 2018 at 10:24 PM Lucas Michailian notifications@github.com
wrote:

Same here using react-native-0.55.4

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18899#issuecomment-406344109,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AH9p9wDkLGlClnrvNjUMjuHD-U5ylRsfks5uILnTgaJpZM4TYmA1
.

skptricks on 20 Jul 2018

👎1

@navata @lmichailian have you guys tried cihadturan's solution above?

@skptricks have you tried to reproduce this issue by following the steps specified? if you manage to not having any problem on Hot Reloading after following the steps, we are happy to know your React Native version and steps you have done to solve the issue

williamliangwl on 20 Jul 2018

Currently using [email protected] version.

On Fri, Jul 20, 2018 at 12:38 PM williamliangwl notifications@github.com
wrote:

@navata https://github.com/navata @lmichailian
https://github.com/lmichailian have you guys tried cihadturan's
solution above
https://github.com/facebook/react-native/issues/18899#issuecomment-387409033
?

@skptricks https://github.com/skptricks have you tried to reproduce
this issue by following the steps specified? if you manage to not having
any problem on Hot Reloading after following the steps, we are happy to
know your React Native version and steps you have done to solve the issue

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18899#issuecomment-406508857,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AH9p90B6quVApjTeo7ncxk_EehwaWY3Aks5uIYHSgaJpZM4TYmA1
.

skptricks on 20 Jul 2018

First uninstall the application from emulator.
Then run the react native application in emulator and enable the hot reloading.

skptricks on 20 Jul 2018

👎6 🎉1 👍1

@tribou Do you have to do anything else other than add that script?

Is it called automatically as long as its there?

technoplato on 29 Jul 2018

Found a fix for me.

Video with all details for those interested

Fix

1) Update to 0.55.4
To do that, navigate to the root directory of your project and enter the line
npm install [email protected]
rm -rf node_modules
npm i

2) Uninstall the application and kill the package manager

3) Run your project again to make sure that upgrading the react-native version worked properly

4) If you render any code with JS6 style functions, change them to traditional style. I cover this in the video if you don't know what I mean.

foo = () => {
    // This doesn't work with hot reload on v.0.55.4
}

foo() {
    // This does work with hot reload on v.0.55.4
}

Hopefully that helps. No other changes required!

technoplato on 29 Jul 2018

Check out below link to enable hot reloading in react native application :
Enable Hot Reloading In React Native
https://www.skptricks.com/2018/07/enable-hot-reloading-in-react-native.html

On Sun, Jul 29, 2018 at 6:04 AM Michael Lustig notifications@github.com
wrote:

Found a fix for me.

Video with all details for those interested
https://www.youtube.com/watch?v=sdQCGab4MjY
Fix

1.

Update to 0.55.4
To do that, navigate to the root directory of your project and enter
the line
npm install [email protected]
rm -rf node_modules
npm i
2.

Uninstall the application and kill the package manager
3.

Run your project again to make sure that upgrading the react-native
version worked properly
4.

If you render any code with JS6 style functions, change them to
traditional style. I cover this in the video if you don't know what I mean.

foo = () => {
// This doesn't work with hot reload on v.0.55.4
}

foo() {
// This does work with hot reload on v.0.55.4
}

Hopefully that helps. No other changes required!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18899#issuecomment-408643769,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AH9p9zdVRlKJkjbgr6vDEBiyA59i1QB1ks5uLQMwgaJpZM4TYmA1
.

skptricks on 29 Jul 2018

👎11 👍1

@lustigdev your issue is different. Arrow functions doesn’t work with hmr by default. You can use the following plugin:
https://github.com/bvic23/babel-plugin-functional-hmr

cihadturhan on 29 Jul 2018

👍3 🎉1

Hm, @cihadturhan, I need some help understanding why my issue was different.

Could you answer this: it I made these changes on version 0.55.3, are you saying they would have worked?

And also, if that's the case, can you help me (or at least point me towards some resources that will help me) understand why HMR broke all of a sudden for me?

technoplato on 29 Jul 2018

0.54.4 Perfect solution by using the method of cihadturhan Thanks

QShengW on 30 Jul 2018

I'm running into this on 0.56, though the file that @cihadturhan refers to seems to have been moved to the metro package; not sure how this patch ought to be used there.

Is this the issue tracking the underlying Metro problem? https://github.com/facebook/metro/issues/165

Hope this gets resolved legitimately sometime rather than requiring patching it like this.

osdiab on 14 Aug 2018

👍1

Same issue here. HotReload only working till a redbox error hit. Then reload forced when redbox issue fixed and HotReload stops working till a forced reload. Can repro with a clean react-native init app.

BenBtg on 23 Aug 2018

Hi, for anyone using Typescript, try changing your tsconfig.json like this:

"compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",

    //  comment next line
    // "resolveJsonModule": true
}

See this article

In this case I have to abandon importing from a json file.

I'm using RN 0.55.3.

Phecda on 1 Sep 2018

🎉2

Same issue here. Fresh start works hit hot-reload until I have a redbox error. Then you need to either redeploy or kill the app and manual restart.

RN : 0.55.4

Batuu13 on 12 Sep 2018

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

Thanks dude!! your solution fixed my issue. I was experiencing a 20+ seconds delay in seeing the HotLoading on my phone, now i see it almost instantly as soon as i save.

P48L0 on 18 Sep 2018

👍1

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

It's not work for RN 0.57, because file attachWebsocketServer.js is not exist.

Maybe, some have solution for this problem?

khorark on 19 Sep 2018

👍1

It's not work for RN 0.57, because file attachWebsocketServer.js is not exist.

Maybe, some have solution for this problem?

For me patching it in node_modules/metro/src/lib/attachWebsocketServer.js.flow worked. 👍

jan-happy on 19 Sep 2018

👍8 ❤1 🎉1 😄1

It's not work for RN 0.57, because file attachWebsocketServer.js is not exist.
Maybe, some have solution for this problem?

For me patching it in node_modules/metro/src/lib/attachWebsocketServer.js.flow worked. 👍

I patched following @cihadturhan 's instruction and yours but there is a error threw:

import type { Server as HTTPServer } from 'http';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Module._compile (/Users/vinhle/Desktop/Projects/vnMov/node_modules/pirates/lib/index.js:83:24)
    at Module._extensions..js (module.js:663:10)
    at Object.newLoader [as .js] (/Users/vinhle/Desktop/Projects/vnMov/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

My react native version is "0.57.1"

kida7 on 19 Oct 2018

same as React native 0.57.2 I have to use live reload to reload entire project, it's annoying

jamessawyer on 30 Oct 2018

👍4

Switch back to old one : react-native init --version
[email protected] .

On Tue, Oct 30, 2018 at 9:57 PM jamessawyer notifications@github.com
wrote:

same as React native 0.57.2 I have to use live reload to reload entire
project, it's annoying

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18899#issuecomment-434369138,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AH9p94Nt4pvuPiMRsZ_437ggLgRiRYxCks5uqH4DgaJpZM4TYmA1
.

skptricks on 31 Oct 2018

👎1

How is this still an issue? Am I missing something or is hot reload not important feature of RN?

BenBtg on 5 Nov 2018

How is this still an issue? Am I missing something or is hot reload not important feature of RN?

It is super crucial and to me it's a killing feature compared to other frameworks/libraries. It speeds up development a lot.

kipertech on 5 Nov 2018

👍3

How to fix hot reloading:
1.) DO NOT attempt to upgrade to 0.57.04 -- It will fail!
2.) Start a brand new react-native 0.57.04 project.

fogil on 5 Nov 2018

👎3 😕1

@fogil I created a brand new react-native 0.57.4 project and it still doesn't work

bntzio on 9 Nov 2018

😄1

Hot reloading only seems to work for me with remote debugging on.

underbluewaters on 14 Nov 2018

👍2

Try adding -- --reset-cache to your run command.
*for Linux OS

Ref:
https://www.reddit.com/r/reactnative/comments/8mlelt/hot_reloadinglive_reload_stopped_working_how_do_i/

abhijit-padhy on 17 Nov 2018

How can this get screwed up? It's promised out-of-the-box, as we all expect it to be, and work. 🤦‍♂️
Finally upgraded from 0.50.3, to 0.57.5, and now the development experience suck, after having hot-reload for over 1 year working on RN every day.

Frexuz on 17 Nov 2018

👍2

On react-native: 0.57.4, and the same error still occurs, it's really a headache, Any Fix out there ?
whenever I change something in code I need to kill the app and re-run for the code to take place. HRM isn't working at all.

adilhaddaoui on 19 Nov 2018

same here on [email protected], the experience really sucks.

fanyer on 21 Nov 2018

👍15

Hot reloading only seems to work for me with remote debugging on.

Turning on remote debugging also resolves the issue for me, but just as a workaround

SRandazzo on 26 Nov 2018

There isn't "attachWebsocketServer.js" in [email protected] so good bye to the patch by @cihadturhan.
Why does the team even bother releasing the new versions If it breaks the existing core features.

hackerhgl on 26 Nov 2018

Just spotted this fix here merged to master: https://github.com/facebook/react-native/pull/22412

:-D

SRandazzo on 26 Nov 2018

🎉1 👍1

confirm working after upgrading to RN 0.57.6 (however, I have to configure the project against for it to work with xcode 10)

https://github.com/facebook/react-native/issues/20774

s123121 on 27 Nov 2018

I noticed the same problem, I'm using 0.57.7 on iOS simulator. I think it used to work in 0.57.2. For me the "Hot Loading..." notification appears but the view is not re-rendered until I perform a reload (Cmd-R).

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.0.0 - /usr/local/bin/node
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        API Levels: 17, 18, 19, 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.0, 25.0.1, 26.0.1, 26.0.3, 27.0.3, 28.0.3
        System Images: android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.3 => 16.6.3
      react-native: ^0.57.7 => 0.57.7
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1

(Xcode is actually 10.1, I just have two copies installed)

sryze on 29 Nov 2018

👍2

@cihadturhan's patch is not wokring. Even, @jan-happy's fix didn't help. Using version 0.57.6

vicke4 on 30 Nov 2018

Upgrading from 0.48 to 0.57. Hot reloading not working. Tried above steps, nothing is work.
Deleted package-lock.json. npm install, regenerate package-lock.json. Hot reloading working.

yk-yong on 6 Dec 2018

👍1

0.57.7 still faces this issue...
Any workaround for this patch?
Thanks.

vjtc0n on 6 Dec 2018

👍9 😕3

For me using XCode 10 and 0.57.7: Hot reload enabled if I make change - I can see Hot reloading bar on top and after a while app is just closed (probably crashes). For me hot reload works if debug is running at the same time.

plrdev on 10 Dec 2018

👍1

For me using XCode 10 and 0.57.7: Hot reload enabled if I make change - I can see Hot reloading bar on top and after a while app is just closed (probably crashes). For me hot reload works if debug is running at the same time.

Jeah thanks for that! Its working when the Debugger is running!

timhilgenstoehler on 10 Dec 2018

Recently my project got performance improvement by changing from React.Component to React.PureComponent so the i got an HMR toast in android but the change didn't reflect in the UI.
Solved by following this in SO: https://stackoverflow.com/questions/46013170/react-native-0-47-1-hot-reload-is-not-reflecting-code-changes-on-macos

msiripan on 12 Dec 2018

👍1

For quick fix (Actually its a bad practice)

push your current work
delete your project (make sure you already push your local changes)
git clone again your project

michaelroevievictoria on 19 Dec 2018

👎4

In my case, the debug server(from Dev Settings) which I had set in the phone got reset when I turned off the Wi-Fi. So, in the debugger menu, I had to choose Dev Settings -> Debug Server and I added back the PC IP and port as 192.168.1.3:8081. It worked for me.

So, if it's not working, one option we can look for is the Debug Server setting.

mpraki on 23 Dec 2018

We managed to get it working on [email protected] and [email protected] by pinning react-deep-force-update to 1.1.2

// package.json
"resolutions": {
  "react-deep-force-update": "1.1.2"
}

sbycrosz on 28 Dec 2018

👍23 🎉17 ❤7 🚀4 👀3

We managed to get it working on [email protected] and [email protected] by pinning react-deep-force-update to 1.1.2

I can confirm that this fixed the problem for me when upgrading my project's React Native version from 0.56.0 to 0.57.8.

My yarn.lock had react-deep-force-update locked to version 1.1.1.

I manually removed the react-deep-force-update from my yarn.lock and ran yarn install after that to update the lock file to use version 1.1.2. Then when I restarted the packager using yarn start --reset-cache hot loading started working again.

kristerkari on 19 Jan 2019

👍2

After updating to 0.58.3 I'm still facing this issue on iOS, but only when debugger is enabled.

nicutimofte on 4 Feb 2019

I can confirm, still happening in 0.58.4 for Android. Even if I Stop Remote JS Debugging from the dev menu.

UPDATE: I missed the previous message from @kristerkari, I deleted my yarn.lock, deleted my node_modules directory (just to make sure), reinstalled everything - yarn, then I ran yarn start --reset-cache. Works perfectly now. Cheers @sbycrosz.

Btw, I did not bother changing the version of react-deep-force-update, my yarn.lock was already showing react-deep-force-update@^1.0.0 and still did so after I deleted and reinstalled my packages. I'm guessing the only thing missing after the update was to clear the packager cache.

R4meau on 9 Feb 2019

So far, I've had to use a workaround - enable 'debug JS remotely'
But adding resolutions like @sbycrosz suggested works like a charm - thanks! :)

Joey33 on 14 Feb 2019

Hot reloading might NOT work If you don’t use ES6 and still using create-react-class. I tested this by creating a new project with git init and hot-reloading worked ok. Then I modified the example code to something like this

var createReactClass = require('create-react-class'); var Greeting = createReactClass({ render: function() { return <Text>Hello, world 1234</Text>; } });

And hot reloading broke. You might need to downgrade to 0.51 or refactor your codebase. Hope this helps

jedt on 15 Feb 2019

Confirming that @sbycrosz 's fix is working on 0.58.5 with iOS simulator!

cihati on 22 Feb 2019

🎉2 👍1

react-native start --reset-cache --max-workers=1

gideaoms on 22 Feb 2019

👍3 👎1

if non of above solution works, check your component life cycle method.

I got the problem because i use async on it

componentDidMount = async () => {...}

when i change back without async, hot reloading works fine

raosan on 23 Feb 2019

👎1 👍1

deleting .git/index.lock might help

a-eid on 27 Feb 2019

🎉3 🚀2 ❤2 😄2 👍2

A combination of @gideaoms and @sbycrosz answers did it for me ([email protected])

JohannesKlauss on 3 Mar 2019

Neither the single solutions or a combination of @gideaoms and @sbycrosz answers work for me ([email protected]).
I also tried all the other suggestions from above. (rm node_modules, remote debugging, etc)
Now the screen stays black after I fixed an error that caused a red screen.
Only reload helps.

jan-happy on 7 Mar 2019

👍3 🎉1

I was facing the problem in my office windows 10 PC where code changes don’t reflect in my physical device and in emulator after “Reload” from developer menu (Ctrl +M or with the "Shake Gesture" option) and I am using the latest React-native Relase. Then I reached this page to find a solution. I have tried many of them but it didn’t work for me.

Later I went my home and pull the remote in my home’s Ubuntu PC. Then “Reload” option reflects to my code change.

Today I came to office and create a new folder, where I pulled my branch from remote and now “Reload option from developer menu” reflects to my code changes.

I think this issue has something to do with Windows and git.

Before running this successful build, which reflects to code changes, I did these things as listed below:

Create a new folder.
Git clone “my repository”.
Git checkout “my branch”
From Folder properties Uncheck the attribute “Read only (only applies to files in folder)” in General tab.
In Security Tab give every user names and group full control by checking the Checkbox fields.

sultanularefin on 13 Mar 2019

React Native 0.59 still has the same issue for me.

jan-happy on 14 Mar 2019

Same on newest one for me too - looks like it hangs ONLY after you type in invalid code - anything valid will be reloaded but once node pickup the invalid code it will not hot-reload it anymore.

Inveth on 14 Mar 2019

👍2

@Inveth agree with you, having the same scenario

suzilxptr on 18 Mar 2019

I followed the suggestions above when running in the simulator, but it didn't fix the problem for me.

Then I tried it on my real android phone. In the react native app, I opened the developer menu and tapped "Enable Hot Loading". It gave me an error message about how the server couldn't be found or used or something, and said that if the device and the dev computer were on the same wireless network, to enter the IP and port in the dev menu's Dev Settings -> Debug Server Host & Port For Device. So I did that (192.168.1.6:8081) and hot reloading is now working on my real phone!

Probably need to do something similar when running through the simulator, but I haven't investigated yet.

lettucemode on 19 Mar 2019

In my case , Hot reload stops working after 3-4 time i update my code . then i need to reload it manually to see my code update.

nahidmbstu on 19 Mar 2019

I'm not sure if this is a know issue or if this is related but I had to change root component to be class component instead of function component.

jsslai on 21 Mar 2019

👍6

i can confirm, if the root component is a class, it's working fine for me

import React from 'react'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from './src/Home'

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  initialRouteName: 'Home',
})

const AppContainer = createAppContainer(AppNavigator)
// no hot loading
// export default AppContainer

class AppNavigatorWrapper extends React.Component {
  render() {
    return <AppContainer />
  }
}
// hot loading is working!
export default AppNavigatorWrapper

cdreier on 21 Mar 2019

🎉11 👍4

@nahidmbstu , I agree , i quote you "In my case , Hot reload stops working after 3-4 time i update my code . then i need to reload it manually to see my code update." ...

Please can someone give a proper solution to this , it is so time wasting.

ctrljs on 22 Mar 2019

For me, the problem was expo was caching on the phone. Once I cleared it, it started working. Also, check your network configuration for your mobile and machine.

suzilxptr on 22 Mar 2019

There are many known problems with Hot Reloading which are existing issues with the hot reloading system separate from React Native. @gaearon was interested in fixing this but I'm going to close this PR here as we can't really do anything about it from within React Native.

cpojer on 26 Mar 2019

I'm not sure if this is a know issue or if this is related but I had to change root component to be class component instead of function component.

Does not help here :(

jan-happy on 27 Mar 2019

one of the hot reload issues is related to visual studio code, if you are working on a project and for some reason, you click reload visual studio code, then hot reload will stop working. My tip is: reopen visual studio code every time you install a new extension or when you want to open another project.

gideaoms on 27 Mar 2019

🎉2

@gideaoms That's a great hint, thank you!
It indeed works for me! I just wonder: Why?
I don't use Visual Studio for debugging or running the app, I just use it as an editor. How does this affect HMR?

jan-happy on 4 Apr 2019

@gideaoms suggestion along with killing metro and starting again (with --reset-cache) got hot reloading working for me again

mlg87 on 4 Apr 2019

@jan-happy I'm sorry, but I did not investigate the reason in depth. In fact, I found out after researching a lot. I realized that Hot Reloading was working with other editors, but it did not work with VSCode. After some tests, I discovered that opening another project without closing the VSCode or reloading the VSCode after installing an extension was breaking the Hot Reloading.

gideaoms on 5 Apr 2019

🎉1 👍1

For me, the problem was expo was caching on the phone. Once I cleared it, it started working. Also, check your network configuration for your mobile and machine.

@suzilxptr Can you expand on this?

pugson on 1 May 2019

I've just started using React Native, and hot reloading worked like a charm for 2 minutes and went back to being annoying again. Does anybody know the Hot Reload author(s) so they can help us out?

anshgupta1234 on 6 May 2019

if non of above solution works, check your component life cycle method.

I got the problem because i use async on it

componentDidMount = async () => {...}

when i change back without async, hot reloading works fine

thanks bor..

appa3151 on 9 May 2019

watchman watch-del
watchman watch-project

And rebuilding the project fixed for me.

joewired on 14 May 2019

👎2

Got it fixed using

"resolutions": {
  "react-deep-force-update": "1.1.2"
}

Into package.json then running yarn. You can remove it afterwards. Thanks @sbycrosz !

rewieer on 19 May 2019

👍1

@cdreier thanks for that, mine works after wrapping the root component

TaylorDale on 22 May 2019

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.

Nsengiyunva on 15 Jun 2019

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.

gaearon on 16 Jun 2019

👍10 ❤5 🎉5

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

tpisto on 20 Jun 2019

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.

gaearon on 21 Jun 2019

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

EduVencovsky on 21 Jun 2019

👍9

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

chuttam on 26 Jun 2019

👍4

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 on 28 Jun 2019

👍14 ❤7 🎉5

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.

gaearon on 28 Jun 2019

❤6 🎉6 👍6

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

robertpaul01 on 30 Jun 2019

Just checked that this is fixed.

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

gaearon on 30 Jun 2019

👍2

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

https://github.com/facebook/react-native/issues/18899#issuecomment-475414525

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?

cdreier on 2 Jul 2019

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

gaearon on 2 Jul 2019

👍7 🚀1 ❤1

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

nathsimpson on 15 Jul 2019

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?

aminy on 2 Aug 2019

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

femartin on 4 Aug 2019

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

DaniAkash on 14 Aug 2019

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"
}

eduardopelitti on 27 Aug 2019

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 !

rewieer on 31 Aug 2019

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.