react-transform-hmr in RN 0.59 is causing problems with class static properties

[Arlen22]

How do I prevent the hot module loader from wrapping my classes? And what is react-transform-hmr anyway. The NPM page says it's highly experimental. The NPM package hasn't been updated in 4 years, and the GitHub repo refers to a PR which was merged two years ago saying that it is deprecated in favor of the PR. Anyway, that's beside the point.

Because of it I cannot call static methods from inside the class. The culprit appears to be this line, which comes between the class definition itself and the static assignments and creates a proxy that the methods inside the constructor cannot see changes to.

exports.ContentPage = ContentPage = _wrapComponent("ContentPage")(ContentPage);

It refers to this code inserted at the top of the module

  var _node_modulesReactTransformHmrLibIndexJs2 = (0, _index.default)({
    filename: "proj/src/components/VideoWatch.ts",
    components: _components,
    locals: [module],
    imports: [_react.default]
  });

  function _wrapComponent(id) {
    return function (Component) {
      return _node_modulesReactTransformHmrLibIndexJs2(Component, id);
    };
  }

I'm compiling my project from TypeScript to JavaScript using react-native-transform-typescript and then putting that into Babel. Source maps and everything else works fine, except that there must be something about the TypeScript class definition that is not quite syncing with Babel. I exported the source using the same settings, and the static properties are indeed assigned outside the class definition by TypeScript, however I don't think Babel should be interfering with this, because the developer might wish to do this as well.

Here is my full tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": false,
    "isolatedModules": false, 
    "target": "es2015",
    "module": "es2015",
    "importHelpers": true,
    "baseUrl": "."
  }, 
  "exclude": ["./node_modules"]
}

If I change the target to es5, it works fine, of course, since the declaration is a function and therefore does not get wrapped. Anything later has the external property assignments (apparently Javascript does not use the static keyword), and therefore breaks.

I am using Expo, which uses react-native 0.59, but as best as I can tell it only uses babel-preset-expo which uses 'metro-react-native-babel-preset' for the most part.

React Native version:

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-2415M CPU @ 2.30GHz
      Memory: 17.42 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8 

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[Arlen22]

Ok, I added the React Native version to the original post.

React Native version:

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-2415M CPU @ 2.30GHz
      Memory: 17.42 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8 

[Arlen22]

It worked to remove the line if(isFunctionComponent) in react-transform-hmr (which is actually loaded in the client, not the compiler) and just return all components immediately. But that's obviously not a recommended solution, so hopefully there is a better one. I guess since it's in the client I could replace it in my AppEntry file.

[Arlen22]

@react-native-bot is that better?

[Arlen22]

For anyone who finds this, I've come to the conclusion that it is OK to output ES5 since that is what Babel outputs as well, so I've just targeted ES5 and moved on. However, for future ES6+ support, it would be good to have a solution to this.

[anchengjian]

same issue as well.

gaearon/react-proxy#68

But react-hot-loader has been fixed.
gaearon/react-hot-loader#304

[anchengjian]

The bug in the latest RN(0.61.2) is fixed, hmr was replaced by react-refresh

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.