Hot reload update view

[challenger532]

Hot reload is not updating the views! A Toast with hot load is shown but views are not updated, on force refresh, the simulator views are updating!

[a9udn9u]

I'm having the same issue on macOS.

My tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "./src",
    "strict": true,
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "noEmit": true,
    "jsx": "react",
    "lib": [ "dom", "es6", "es2016" ]
  },
  "include": [ "src/**/*.ts", "src/**/*.tsx" ]
}

Whenever a ts/tsx file is updated, the corresponding js file won't be recompiled, the hot reloading toast shows but nothing will change. Since tsc doesn't emit any output, I have to restart the packager on every file change, it's quite annoying.

EDIT

I got it working by following this thread, not sure what exactly fixed it but I guess it's clearing watchman state.

[ds300]

I'm going to close this issue due to inactivity. If you're still having trouble with hot reloading, please feel free to open another issue and link to this one 🙏

[JasCodes]

yup still happening

[ds300]

Any chance you could reproduce this issue in a public repo?

[JasCodes]

yea lemme do it :)

[JasCodes]

Thr you go
https://github.com/jas99/rn_ts_hmr_issue_34

[ds300]

Dope thanks! I'll look at this later tonight.

[JasCodes]

@ds300

Although also tried https://www.npmjs.com/package/react-native-template-typescript.

Lemme attach my envs

envinfo                                                                                     10.38   ✔   22:27    05.06.18

  System:
    OS: macOS High Sierra 10.13.4
    CPU: x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 4.90 GB / 16.00 GB
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 10.3.0 - /usr/local/bin/node
    npm: 6.1.0 - /usr/local/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  Utilities:
    CMake: 3.11.3 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.17.1 - /usr/local/bin/git
  Servers:
    Apache: 2.4.29 - /usr/sbin/apachectl
  Virtualization:
    Docker: 18.05.0 - /usr/local/bin/docker
    VirtualBox: 5.2.10 - /usr/local/bin/vboxmanage
  SDKs:
    iOS SDK:
      Platforms: iOS 11.3, macOS 10.13, tvOS 11.3, watchOS 4.3
    Android SDK:
      Build Tools: 23.0.1, 26.0.2, 27.0.3
      API Levels: 23, 26, 27
  IDEs:
    Android Studio: 3.0 AI-171.4443003
    Emacs: 22.1.1 - /usr/bin/emacs
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.0 - /usr/bin/vim
    VSCode: 1.23.1 - /usr/local/bin/code
    Xcode: 9.3/9E145 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.10.2 - /usr/local/bin/go
    Java: 1.8.0 - /usr/bin/javac
    Perl: 5.18.2 - /usr/bin/perl
    PHP: 7.1.14 - /usr/bin/php
    Python: 2.7.15 - /usr/local/bin/python
    Ruby: 2.5.1 - /usr/local/bin/ruby
    Rust: 1.9.0 - /Users/jas/.cargo/bin/rustup
  Databases:
    SQLite: 3.19.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 66.0.3359.181
    Firefox: 59.0.2
    Safari: 11.1

[JasCodes]

Basically once I change code, on my device it gives me toast msg of hmr update and then disappears without making any updates.

Lemme know if you need more info.

[ds300]

Just double checking: hot reloading works ok if you use the standard non-typescript setup?

[JasCodes]

It definitely does.

[ds300]

This fixed it for me:

tsconfig.json

 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es5",
+    "target": "es2015",
-    "module": "commonjs",
+    "module": "es2015",
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
 ...

[JasCodes]

Thx very much for your time, it worked for me as well 😄.
Feel free to close it.

[JasCodes]

For anybody else stumbling on it; HMR also don't work with "jsx": "react-native", it need to be "jsx": "react"

Thx

[ifiokjr]

@ds300 you sir are a legend amongst us mere mortals! If you haven't guessed... your fix worked for me.

Another suggestion for those who are still seeing crashes with Hot Module Reloading when using React Native in a Typescript environment; make sure to get rid of any circular dependencies.

A great library for helping with this is tslint-no-circular-imports.

Install it then add it to your tslint.json in a similar way to the following

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier",
    "tslint-plugin-prettier",
    "tslint-no-circular-imports" 
  ],
  "defaultSeverity": "error",
  "jsRules": {},

[tal952]

My fix is combination of @ds300 and @Jas99 comments.

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react-native",
    ...
    }
...
}

[ykensuke]

When I change the module setting from "commonjs" to "es2015", some libraries can't be correctly loaded. For example in my case, "react-native-firebase".

I would not like to close this issue because I don't think the underlying cause of this issue hasn't been solved. I understand change the module setting from "commonjs" to "es2015" is a good solution for temporal. But it's not the actual solution. Or is it actually the problem on other library depended by this library?

[ifiokjr]

@ykensuke that looks like a different issue.

There are two potential fixes. Either import firebase as follows:

import * as firebase from 'react-native-firebase'

Or, perhaps easier, update your tsconfig.json to include the following two properties.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
  },
}