React-hot-loader: HMR patches the file successfully but doesn't trigger a render

[adamtal3]

Description

HMR works as expected but doesn't force render the updated component. I can see in the console:

[WDS] App hot update...
[HMR] Checking for updates on the server...
[React Transform HMR] Patching Root
[HMR] Updated modules:
[HMR]  - ./src/app/Root/RootContainer.js
[HMR] App is up to date.

And nothing changes in the UI until I click on something that triggers the render of Root - after that I do see that the component was updated.

This started after updating React from 15.6 to 16.2.

Expected behavior

Root should be re-rendered (forceUpdate?) once it's patched.

Actual behavior

It doesn't re-render. It just updates.

Environment

React Hot Loader version: 3.1.3

1. node -v: v8.9.1

2. npm -v: 5.4.2

3. Operating system: Windows 10 X64

4. Browser and version: Chrome Version 63.0.3239.84 (Official Build) (64-bit)

Reproducible Demo

Not sure I can get such a thing done. Is there any reason you can think of the file will be patched as it should but wouldn't re-render?

[theKashey]

What does React Transform HMR doing here?
Did you wrap all the things with AppContainer?

[adamtal3]

Did you wrap all the things with AppContainer?

I have the AppContainer around my root component.

What does React Transform HMR doing here?

Don't know. I have babel-plugin-react-transform in my devDependencies.

This is my .babelrc file:

{
  "env": {
    "development": {
      "presets": ["react-hmre"],
      "plugins": [
        "transform-react-display-name",
        "transform-decorators-legacy",
        "react-hot-loader/babel"
      ],
      "compact": false
    },
    "test": {
      "plugins": ["transform-decorators-legacy"],
      "compact": false
    },
    "production": {
      "plugins": [
        "transform-decorators-legacy",
        "transform-react-remove-prop-types",
        "transform-react-constant-elements",
        "transform-flow-strip-types",
        "transform-react-inline-elements"
      ],
      "compact": true
    }
  },
  "presets": ["es2015", "react", "stage-2"]
}

This is my render function:

import { AppContainer } from 'react-hot-loader'
import Root from './app/Root/RootContainer';
...
  ReactDOM.render(
    <AppContainer>
        <Root history={() => history} store={() => store} routes={() => routes} />
    </AppContainer>,
    document.getElementById('app')
  );

[theKashey]

Looking good, but please use env preset, not react-hmre
HMRE was designed to work with ReactHotLoader V1, not V3.

[adamtal3]

@theKashey Thanks.

Any idea how I can understand why it doesn't re-render?
I tried debugging the patching of the file but didn't see where it calls for a render.

[theKashey]

@adamtal3 - look like you did not enable harmony modules. Do you re-require App on module hot update?
See https://github.com/gaearon/react-hot-loader/pull/700

[adamtal3]

I don't re-require the App on module hot update. Should I? Everything somehow worked perfectly with react 15.6..

I tried adding "{ "modules": false }" to the env preset in my babel file but it fails with Missing class properties transform.

Isn't "presets": [ ["env", { "modules": false }] ] what you meant? Am I missing something?

[theKashey]

In case you dont specify not to transpile modules you have to call Root = require('./app/Root/RootContainer') manually on module.hot.accept, before you render the new code.
Without re-require you will render the old code, and next webpack will update code, as long nobody actually "accepts" it.

[adamtal3]

Seems that simply adding a module.hot.accept(); solved the issue for me.
@theKashey - Thanks a lot for the help. Tell me if I should of done anything differently (if it works now, should I require the root container anyway?).

[theKashey]

Yep, without modules:false you should.