Fix HMR : client was not working + mismatch between server/client (#749)

examples/with-react-loadable/src/client.js

@@ -1,20 +1,29 @@
-import App from './App';
 import React from 'react';
 import { hydrate } from 'react-dom';
 import Loadable from 'react-loadable';
 import BrowserRouter from 'react-router-dom/BrowserRouter';
+import App from './App';
+
+const root = document.getElementById('root');
 
 window.main = () => {
+  render(App);
+};
+
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NewApp = require('./App').default;
+    render(NewApp);
+  });
+}
+
+function render(Root) {
   Loadable.preloadReady().then(() => {
     hydrate(
       <BrowserRouter>
-        <App />
+        <Root />
       </BrowserRouter>,
-      document.getElementById('root')
+      root,
     );
   });
 }
-
-if (module.hot) {
-  module.hot.accept();
-}

examples/with-react-loadable/src/index.js

@@ -13,10 +13,11 @@ Loadable.preloadAll().then(() => {
 if (module.hot) {
   console.log('✅  Server-side HMR Enabled!');
 
-  module.hot.accept('./server', () => {
+  module.hot.accept('./server', async () => {
     console.log('🔁  HMR Reloading `./server`...');
     server.removeListener('request', currentApp);
     const newApp = require('./server').default;
+    await Loadable.preloadAll();
     server.on('request', newApp);
     currentApp = newApp;
   });