Hot Module Reloading doesn't work after restarting the app

Do you want to request a feature or report a bug? Bug What is the current behavior? See detail on https://github.com/facebook/react-native/issues/18899

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. See detail on https://github.com/facebook/react-native/issues/18899

What is the expected behavior?

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• Environment:

  • OS: macOS High Sierra 10.13.3
  • Node: 8.11.1
  • Yarn: 1.5.1
  • npm: 5.6.0
  • Watchman: 4.9.0
  • Xcode: Xcode 9.3 Build version 9E145
  • Android Studio: 3.1 AI-173.4670197

• Packages: (wanted => installed)

  • react: 16.3.0-alpha.1 => 16.3.0-alpha.1
  • react-native: 0.55.2 => 0.55.2
  • metro: 0.30.0 => 0.30.0

More technical details I made a detailed debugging on how this happens, but I don’t know how to solve. This issue happens as a result of two flaws:

1. HMR Server doesn’t know if a client is disconnected (deliberately or not)
2. When there are multiple clients connected, HMR Server sends the correct updates to only one client

Debugging steps

1. Prepare a sample project with react-native init ...
2. Add a breakpoint to attachWebsocketServer@54
3. Start metro in debug mode, launch the RN app on device, enable HMR on developer menu
4. Confirm it connects on attachWebsocketServer@54
5. Change a line in RN, save the file and confirm modules.length ===1 in hmrJSBundle@40
6. From debug menu on the app, press restart.
7. Expect the current socket connection close but it never enter attachWebsocketServer.js@71 so the connection lives forever
8. When app restarts, see it enters in attachWebsocketServer@54 again. This time we will have 2 socket connections from one device.
9. This means, the line in HmrServer.js@110 will be executed twice
10. Change a line in RN, save the file. This time [hmrJSBundle@40] will be executed twice. Confirm modules.length === 1 for first websocket (the old one) and modules.length === 0 for the second websocket.
11. Repeat step 6, 7 and 8 and confirm that you now have 3 websockets and HmrServer will send 3 responses, one of which has non-empty modules, 2 of which has empty modules.

How to solve ws libary doesn’t have a built-in connection close callback. I tried this one as also suggested in this issue I’m not familiar with the package. I hope this info help you figure the issue out.

[rafeca]

Thanks for the report! I’m looking into it

[williamliangwl]

Hi @rafeca , actually we had similar discussion in the react native repo and people find @cihadturhan 's solution to be working as expected.

Hopefully it can help to solve this issue faster