Perform full-reload

[sarink]

When changing some code that cannot be hot-reloaded (for example, a fat-arrow-bound event handler function), I was expecting react-hot-loader to perform a full-refresh of my page. I seem to recall a much older version of this lib behaving that way (but maybe I'm wrong).

Is this a configuration issue? A bug? A wont-fix? A feature request?

Thanks!

[theKashey]

A fat-arrow-bound event handler usually could be reloaded, unless it was "attached" via addEventListener in componentDidMount, and, as long component will not "remount" handler will not update.
Anyway - we could not detect such conditions.

RHL only not updating lifecycle events, everything else should be updated.

[sarink]

@theKashey doesn't the function get magically bound in the constructor, which can't be hot-reloaded?

For the record, I'm talking about a function like this:

class MyComponent extends React.Component {
  handleClick = (event) => {
    // add a console.log here and hit save, then click the div, there is no log output
  }
  render() {
    return <div onClick={this.handleClick}>click me</div>;
  }
}

In any case, the new event handler is not injected, and my code also does not do a full-reload.

My setup, if it's relevant:

// webpack.config.js
const rhlBabelLoader = {
  loader: 'babel-loader',
  options: {
    plugins: [
      'babel-plugin-syntax-typescript',
      'babel-plugin-syntax-decorators',
      'babel-plugin-syntax-jsx',
      'react-hot-loader/babel',
    ],
  },
}
const tsLoader = 'ts-loader';
module.exports = {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        use: isProd ? [tsLoader] : [rhlBabelLoader, tsLoader],
      },

// index.tsx
const store:IStore = createStore(reducer, composeEnhancers(applyMiddleware(...middleware)));
const content = (
  <Provider store={store}>
    <RouterContainer />
  </Provider>
);
const dest = document.getElementById('root');
ReactDOM.render(content, dest);

// RouterContainer.tsx
class RouterContainer extends React.Component {
  ...
}
const ConnectedRouterContainer = connect<IStoreProps, IDispatchProps>(mapStateToProps, mapDispatchToProps)(RouterContainer);
const HotConnectedRouterContainer = hot(module)(ConnectedRouterContainer);
export default HotConnectedRouterContainer;

[theKashey]

In your case it will not, as long after ts-loader we have pure ES5, while our babel plugins looking for ES6 features, like classes.

Just swap them! Or change tsconfig to emit es6 (but not in prod). Check readme, I've updated this moment 3 weeks ago, or better dive into the original issue - #884