hot reloading not happening for child [dumb] components

[abhijeetNmishra]

I have container components and child components. Live reloading happens for my any changes in root (container) components but child components changes are not triggering even webpack rebuild.

part of webpack.config.file

entry: {
    main: [
      'webpack-hot-middleware/client',
      './src/index.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      include: path.join(__dirname, 'src'),
      loader: ['babel'],
      exclude: [nodeModulesPath],
      // Options to configure babel with
      query: {

      }
    }

.babelrc

{
  "stage": 0,
  "env": {
    "development": {
      "plugins": ["react-transform"],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }
      }
    }
  }
}

[panathea]

Did you resolve this? I think I'm running into the same issue and I'm curious if you have a solution. Thanks.

[bunkat]

I'm running into the same issue. I'm using react-redux and connected components are being refreshed correctly (sort of, only render changes, not property changes) but child components are being reloaded but not refreshed. Any solution?

[gaearon]

It's impossible to diagnose the issue without a full project reproducing them with exact repro steps.

[abhijeetNmishra]

agree to @gaearon that .. these issues are project specific and versions we are using for specific packages. For me this got resolved after upgrading to Babel 6 and cleaning up some child components.

Please check if its happening for only few child components or all (that was the trick for me)

[bunkat]

Was hoping it was just a configuration change, working on debugging now and creating a sample project. Thanks.

[bunkat]

I've found the problem. If a component is wrapped in a react-redux connected parent component (I'm using react-redux 4.0.2), the child component will not be reloaded on change. Now that I figured out the root cause, it may be related to a bunch of other open issues I saw or I might have just missed something in proper usage. Same as gaearon/babel-plugin-react-transform#26?

For completeness, here is what I'm seeing:

_Connected component:_

class Form extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <form>
        {this.props.children}
      </form>
    );
  }
}

export default connect(...)(Form);

_Wrapped component:_

class LoginForm extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      <Form id="loginForm">
        this is a test
      </Form>
    );
  }
}

Changing the text this is a test will not cause the component to re-render. Replace <Form> with <div> and everything works as expected. Replace connect()(Form) with just Form and everything works as expected.

It looks like the problem is in connect.js.

    if (process.env.NODE_ENV !== 'production') {
      Connect.prototype.componentWillUpdate = function componentWillUpdate() {
        if (this.version === version) {
          return;
        }

        // We are hot reloading!
        this.version = version;

        // Update the state and bindings.
        this.trySubscribe();
        this.updateStateProps();
        this.updateDispatchProps();
        this.updateState();
      };
    }

If you comment out the version check, the component will start updating, though it is one update behind for some reason. For example, if you replace this is a test to this is a test 2, nothing will happen. But if you then replace it with this is a test 22, it will then update to display this is a test 2.

[bunkat]

As I continue to hack away, looks like getting rid of the version check in connect.js and then force updating components twice in react-transform-hmr causes the componet to be updated immediately and correctly.

        console.info('[React Transform HMR] Patching ' + displayName);
        var instances = componentProxies[globalUniqueId].update(ReactClass);
        setTimeout(function () {
          return instances.forEach(function(instance) {
            forceUpdate(instance);
            forceUpdate(instance);
          });
        });

However, commenting out the version check messes up all normal updates so that the UI isn't actually usable anymore...

[bunkat]

Repository demonstrating issue is available at https://github.com/bunkat/counter. It is the react-redux counter example with babel6 hot loading and a new connected wrapper component.

To reproduce the issue:

1. git clone https://github.com/bunkat/counter.git
2. cd counter
3. npm install
4. npm start
5. Open browser to http://localhost:3000
6. Edit components/Counter.js
7. Modify the render method, change Clicked to Not Clicked

The module will be updated via HMR, but the Counter component will not be rendered with the new text.

[bunkat]

I've opened a new issue at reduxjs/react-redux#224 since I think this is a different issue that is expected to work at the moment.

[gaearon]

Good catch, thanks for reporting and providing a full repro. This one is a bug indeed.