Update to React Hot Loader v3

[shiroganee]

Bug:

• stateless component won't be changed in HMR

Should be:

• it should refresh after change

Probably a problem:
React Hot Loader probably is in version lower than 3.x. To make it work correctly it should be RHL3.x (unless .NET do something absolutely different for React)

[MarkPieszak]

Did upgrading it help solve the problem?

[DanHarman]

I'm seeing problems with HMR. Not sure if it is down to this, but will see if I can find time to upgrade.

[px-tristan-davey]

Do you have the Environment variable ASPNETCORE_ENVIRONMENT set to Development? I just had this problem and you'd have to run the webpack command to rebundle? I assume it's because it's set to production by default?

[shiroganee]

I do have development turned on But the point is, as it is mentioned, the problem occurs only with statless (functional) components. The class ones are going on correctly all the time.

[shiroganee]

gaearon/react-transform-hmr#6

According to this, React-Transform-Hmr (I really thought that React-Hot-Loader is used here) doesn't support stateless (functional) components. So that's the whole reason for the bug that we are having right.

The solution is to bring React Hot Loader. Version 3 is only as version "next" and in releases it is still "beta". Version 1 would be fine as well but then stateless component wouldn't preserve state.
https://github.com/gaearon/react-hot-loader

[shiroganee]

Tried it out (added it directly to my webpack.config.js) and it worked out nicely. But there is one thing that I wonder how this should be solved out. "Next" RHL requires something along:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import RootContainer from './App';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('react-app')
  );
};

render(RootContainer);

if (module.hot) {
  module.hot.accept('./App', () => { render(RootContainer); });
}

So basically we would need to import AppContainer which is a depedency of RHL. Should that be included in the boilerplate? or it should be somehow done by the aspnet-webpack-react (but how if this thing requires ReactDOM.Render which is a part of application and should stay there).

And the App would be in different file with the current Provider + Router + routes.

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      {routes}
    </Router>
  </Provider>
);

But the thing is, it would require this (module.hot) in the code. Is it the prefered way? Cause I hardly can see how this can be done within currently exisitng HotModuleReplacement in aspnet-webpack-react as we do not have a "ReactDOM" there and we shouldn't.

So the boilerplate would need to be changed as well (the one generating) and some of HotModuleReplacements in aspnet-webpack-react (different plugin loading). Also at the beginning of entry point 'react-hot-loader/patch' needs to be injected.

In general this would be a better option, because Stateless components are lighter for a browser as they do not have lifecycles hooks and are prefered for "dumb components".

And also ESLint most common configuration always whine about that one (as it is prefered to use Stateless).

[SteveSandersonMS]

Thanks for reporting the details. Note that before we can update to react-hot-loader v3 , we need:

• To update both ReactSpa and ReactReduxSpa to react-router v4 - Implemented react router v4 to ReactSPA template #817. This is currently waiting for react-router-redux to become stable.
• react-hot-loader v3 itself to become stable. It's currently in beta, and I'm not sure it's suitable for adopting yet considering this.

If the libraries we're blocked on are updated soon, we'll certainly proceed with updating the templates. If not, I'll close this and related issues, because there'd be no action we could take and in general we don't consider "waiting for 3rd-party updates" to be useful to track as open issues.

[SteveSandersonMS]

This is now implemented in the dev branch and will be included in the next version of the template packages.