Switch to react-hot-loader v3

Author: calvinl

.babelrc

@@ -4,6 +4,7 @@
     "react"
   ],
   "plugins": [
+    "react-hot-loader/babel",
     "transform-class-properties",
     "transform-decorators",
     "transform-object-rest-spread",

client/index.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { Router } from 'react-router';
 import { browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
+import { AppContainer } from 'react-hot-loader';
 import configureStore from 'store';
 import routes from 'routes';
 
@@ -23,10 +24,22 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 const history = syncHistoryWithStore(browserHistory, store);
 
-// Render the app!
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={history} routes={routes} />
-  </Provider>,
-  rootElement
-);
+const render = (routes) => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <AppContainer>
+        <Router history={history} routes={routes} />
+      </AppContainer>
+    </Provider>,
+    rootElement
+  );
+};
+
+render(routes);
+
+if (module.hot) {
+  module.hot.accept('../common/js/routes', () => {
+    const newRoutes = require('../common/js/routes').default;
+    render(newRoutes);
+  });
+}

package.json

@@ -95,14 +95,13 @@
   },
   "devDependencies": {
     "babel-eslint": "7.2.3",
-    "better-npm-run": "^0.0.15",
-    "debug": "^2.6.0",
+    "better-npm-run": "0.0.15",
+    "debug": "2.6.0",
     "eslint": "3.19.0",
     "eslint-loader": "1.7.1",
     "eslint-plugin-react": "6.10.3",
     "nodemon": "1.11.0",
     "react-transform-catch-errors": "1.0.2",
-    "react-transform-hmr": "1.0.4",
     "redbox-react": "1.3.6",
     "redux-devtools": "3.4.0",
     "redux-devtools-dock-monitor": "1.1.2",
@@ -143,12 +142,12 @@
     "include-media": "1.4.9",
     "isomorphic-fetch": "2.2.1",
     "json-loader": "0.5.4",
-    "lodash": "4.17.4",
     "mocha": "3.3.0",
     "node-sass": "4.5.2",
     "postcss-loader": "1.3.3",
     "react": "15.5.4",
     "react-dom": "15.5.4",
+    "react-hot-loader": "next",
     "react-redux": "5.0.4",
     "react-router": "4.1.1",
     "react-router-redux": "4.0.8",

webpack/base.js

@@ -1,7 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
 import mapValues from 'lodash/mapValues';
-import autoprefixer from 'autoprefixer';
 import isomorphicConfig from './isomorphic';
 import IsomorphicPlugin from 'webpack-isomorphic-tools/plugin';
 import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './constants';
@@ -48,12 +47,13 @@ export default {
         test: /\.jsx$|\.js$/,
         exclude: /node_modules/,
         use: [
+          'babel-loader',
           {
             loader: 'eslint-loader',
             options: {
               configFile: './.eslintrc',
             }
-          }
+          },
         ]
       },
       {

webpack/development.hot.js

@@ -1,20 +1,22 @@
 /* eslint-disable no-console */
 import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './constants';
 import WebpackDevServer from 'webpack-dev-server';
+import path from 'path';
 import webpack from 'webpack';
 import baseConfig from './base';
 import packageJson from '../package.json';
 
 // Webpack Entry Point for dev server
 const entry = [
+  'react-hot-loader/patch',
   'webpack-dev-server/client?' + DEV_SERVER_HOST_URL,
   'webpack/hot/only-dev-server'
 ];
 
 // Additional plugins
 const plugins = [
   new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin(),
+  new webpack.NoEmitOnErrorsPlugin(),
   new webpack.NamedModulesPlugin()
 ];
 
@@ -50,26 +52,6 @@ const loaders = [
       'postcss-loader',
       'sass-loader'
     ]
-  },
-  {
-    test: /\.jsx$|\.js$/,
-    loader: 'babel-loader',
-    exclude: /node_modules/,
-    // use react-transform to hot reload modules when hot is specified
-    query: {
-      plugins: [
-        ['react-transform', {
-          transforms: [{
-            transform: 'react-transform-hmr',
-            imports: ['react'],
-            locals: ['module']
-          }, {
-            transform: 'react-transform-catch-errors',
-            imports: ['react', 'redbox-react']
-          }]
-        }]
-      ]
-    }
   }
 ];