Update to React Hot Loader v3 #771

Activity

1. MarkPieszak commented on Mar 19, 2017

   

   MarkPieszak

   on Mar 19, 2017

   Contributor

   More actions

   Did upgrading it help solve the problem?
2. DanHarman commented on Mar 21, 2017

   

   DanHarman

   on Mar 21, 2017

   Contributor

   More actions

   I'm seeing problems with HMR. Not sure if it is down to this, but will see if I can find time to upgrade.
3. px-tristan-davey commented on Mar 22, 2017

   

   px-tristan-davey

   on Mar 22, 2017

   More actions

   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?
4. shiroganee commented on Mar 22, 2017

   

   shiroganee

   on Mar 22, 2017

   Author

   More actions

   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.
5. shiroganee commented on Mar 23, 2017

   

   shiroganee

   on Mar 23, 2017

   Author

   More actions

   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
6. shiroganee commented on Mar 24, 2017

   

   shiroganee

   on Mar 24, 2017

   Last edited by shiroganee

   Author

   More actions

   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).
7. shiroganee

   changed the title [-]Statless components in React doesn't HMR[/-] [+]Stateless components in React doesn't HMR[/+] on Mar 24, 2017
8. SteveSandersonMS

   changed the title [-]Stateless components in React doesn't HMR[/-] [+]Update to React Hot Loader v3[/+] on Mar 29, 2017
9. SteveSandersonMS commented on Mar 29, 2017

   

   SteveSandersonMS

   on Mar 29, 2017

   Member

   More actions

   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.
10. SteveSandersonMS commented on May 18, 2017

    

    SteveSandersonMS

    on May 18, 2017

    Member

    More actions

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

    closed this as completedon May 18, 2017