Replace preset-hmre with vanilla webpack HMR

[Dattaya]

This is an alternative to #1207.

Downsides:

• does not preserve component's state but Redux state will be in place;
• could be annoying to some devs that injected non-daemon sagas will be restarted on each change in components, though in my experience it's not a big deal.

Upsides:

• very simple setup;
• works with any kind of component unlike deprecated react-hmre;
• react-hot-loader is still fragile with a lot of edge cases, here we have none;
• injected sagas and reducers will be hot re-loadable for free (no additional setup necessary).

/cc @justingreenberg, @marnusw, @anuraaga

[justingreenberg] edit: resolves #1068

[Dattaya]

That was a bug in package.json that should be fixed before 3.5 release

[coveralls]

Coverage remained the same at 100.0% when pulling 25fddcc on Dattaya:bare-hmr into a578ef0 on react-boilerplate:dev.

[justingreenberg]

@Dattaya looks good to me.... using vanilla webpack hmr is a solid, maintainable approach—as you mentioned, the lack of support for local component state should generally be ok for redux applications since most data and core application state should be lifted into global state... the vastly reduced complexity is worth it

imo, none of the downsides would be a deal breaker for this approach, but i would love feedback from other peeps from core

• has this been tested with webpack v3 by chance?
• maybe we should include something in docs with link to webpack hmr docs?

[justingreenberg]

i know it's a bit outside the scope of this PR, but this has been bothering me for a while... i feel like explicitly unmounting component in hmr callback is more appropriate in this case, ie -

 const MOUNT_NODE = document.getElementById('app')

// ...

 const render = (messages) => {
   ReactDOM.render(
     <Provider store={store}>
       <LanguageProvider messages={messages}>
         <ConnectedRouter history={history}>
           <App />
         </ConnectedRouter>
       </LanguageProvider>
     </Provider>,
     MOUNT_NODE
    )

// ...

  module.hot.accept('containers/App', () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE)
    render(translationMessages);
  });

or unmounting could be handled in render callback, but i feel like this is more explicit

[Dattaya]

let's do this to be certain the components are unmounted correctly

[anuraaga]

LGTM - I had tried using react-hot-loader with ReactLoadable and couldn't get it to update the memoized components, but this approach is working great, very nice.

[Dattaya]

@anuraaga, thank you for trying it out.
@justingreenberg, thanks for renaming the title, fun fact: initially I wanted to name the branch bare-hot 😁.

has this been tested with webpack v3 by chance

Since ModuleConcatenationPlugin is incompatible with DllPlugin) I had to try one or the other, so webpack v3 + DllPlugin—hot reloading works, but webpack v3 with ModuleConcatenationPlugin is a completely different story—react-loadable throws errors on hot reloading and shows a loading indicator instead of a component that was supposed to be loaded. For some reason imported HomePage no longer has __esModule: true flag and resolve returns incorrect result. I think that is a bug in webpack.

maybe we should include something in docs with link to webpack hmr docs?

Added a note with a link in introduction.

[anuraaga]

overlay=true appears to be the default, any reason to set it explicitly?

https://github.com/glenjamin/webpack-hot-middleware/blob/master/client.js#L7

[Dattaya]

no reason, I'm going to remove it

[coveralls]

Coverage remained the same at 100.0% when pulling c859b18 on Dattaya:bare-hmr into a578ef0 on react-boilerplate:dev.

[coveralls]

Coverage remained the same at 100.0% when pulling 9c2227d on Dattaya:bare-hmr into a578ef0 on react-boilerplate:dev.

[coveralls]

Coverage remained the same at 100.0% when pulling d325864 on Dattaya:bare-hmr into a578ef0 on react-boilerplate:dev.

[Dattaya]

Other collaborators seem to be busy, I'll just go ahead and , we can always improve/revert/replace it later.

[kaiwa]

Hey, are there any recently added prerequisites to get webpack hmr working, which are not directly included in this PR?

I have a project based on a an earlier verison of react-boilerplate and trying to apply the changes from this pr, but they break hot reloading and a page reload is triggered on any code change instead.

[Dattaya]

@kaiwa, could be because RR3 (as well as 2) memoizes routing components, take a look at remix-run/react-router#2182, maybe you'll find suitable solution there.

[kaiwa]

@Dattaya just managed to upgrade react-router, it is working now with webpack hmr! thx

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.