From 5b0b78a0bd6af9ff5e2c30b25e8f87ef32bef94f Mon Sep 17 00:00:00 2001
From: = <terrymorrow@gmail.com>
Date: Wed, 17 Oct 2018 17:10:09 -0400
Subject: [PATCH] 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.

---
 client/src/index.js | 20 ++++++++++++++++----
 webpack.config.js   |  6 ++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/index.js b/client/src/index.js
index e355ec7..d8721c4 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -21,7 +21,19 @@ window.store = store
 // bootstrap state
 store.dispatch(fetchMe());
 
-ReactDOM.render(
-  <App store={store} />,
-  document.getElementById('root')
-);
\ No newline at end of file
+// 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)
diff --git a/webpack.config.js b/webpack.config.js
index 2e37da7..2d31ecd 100644
--- a/webpack.config.js
+++ b/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: {