react-native: Hot Reloading is not working

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

We managed to get it working on react-native@0.57.8 and react@16.6.3 by pinning react-deep-force-update to 1.1.2

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

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.

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

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.

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.

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

same here on react-native@0.57.4, the experience really sucks.

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

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

Update to 0.55.4 To do that, navigate to the root directory of your project and enter the line npm install react-native@0.55.4 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 .

deleting .git/index.lock might help

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

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

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

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.

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

@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/",

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

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.

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.

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

Neither the single solutions or a combination of @gideaoms and @sbycrosz answers work for me (react-native@0.58.6). 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.

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

For quick fix (Actually its a bad practice)

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

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.

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

@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

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

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.

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

Just checked that this is fixed.

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

watchman watch-del <path-to-project-directory> watchman watch-project <path-to-project-directory>

And rebuilding the project fixed for me.

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

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.

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.

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

We managed to get it working on react-native@0.57.8 and react@16.6.3 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.

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)

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

😄

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.

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

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.

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 !

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

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.

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.

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

Switch back to old one : react-native init <projectname> --version react-native@0.55.4 .

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 .

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?

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.

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.

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 .