Fix Webpack Hot Reload error (issue #3):

Update webpack configuration to specify output.publicPath with webpack port loaded from dotenv.
Update index to allow for re-rendering application on hot-reload.
Include NamedModulesPlugin to provide module names instead of numbers.

Author: morrow

client/src/index.js

@@ -21,7 +21,19 @@ window.store = store
 // bootstrap state
 store.dispatch(fetchMe());
 
-ReactDOM.render(
-  <App store={store} />,
-  document.getElementById('root')
-);
+// renderApp function for hot reloading
+const renderApp = App => {
+  const NextApp = require('./components/App').default;
+  ReactDOM.render(
+    <NextApp store={store} />,
+    document.getElementById('root')
+  );
+}
+
+// hot loading
+if (module.hot) {
+  module.hot.accept("./components/App", () => { renderApp(App) })
+}
+
+// initial render
+renderApp(App)

webpack.config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require('dotenv').config()
+require('dotenv').config();
 var webpack = require('webpack');
 var path = require('path');
 
@@ -14,6 +14,7 @@ var config = {
   output: {
     path: BUILD_DIR,
     filename: 'app.js',
+    publicPath: `http://localhost:${process.env.WEBPACK_PORT}/`,
   },
   module: {
     loaders : [
@@ -30,7 +31,8 @@ var config = {
     ]
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
   ],
 
   devServer: {