Replaced react-hot-loader with webpack-hot-middleware

Hot loading remains in a separate process to allow server reloading

Also unifies babel configs in .babelrc

.babelrc

@@ -1,4 +1,23 @@
 {
   "stage": 0,
-  "loose": "all"
+  "optional": "runtime",
+  "loose": "all",
+  "plugins": [
+    "typecheck"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "typecheck",
+        "react-transform"
+      ],
+      "extra": {
+        "react-transform": [{
+            "target": "react-transform-webpack-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+        }]
+      }
+    }
+  }
 }

karma.conf.js

@@ -8,7 +8,7 @@ module.exports = function (config) {
     singleRun: true,
 
     frameworks: [ 'mocha' ],
-  
+
     files: [
       'tests.webpack.js'
     ],
@@ -24,7 +24,7 @@ module.exports = function (config) {
       module: {
         loaders: [
           { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: {limit: 10240} },
-          { test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?stage=0&optional=runtime&plugins=typecheck']},
+          { test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
           { test: /\.json$/, loader: 'json-loader' },
           { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }
         ]
@@ -37,8 +37,6 @@ module.exports = function (config) {
         extensions: ['', '.json', '.js']
       },
       plugins: [
-        // hot reload
-        new webpack.HotModuleReplacementPlugin(),
         new webpack.IgnorePlugin(/\.json$/),
         new webpack.NoErrorsPlugin(),
         new webpack.DefinePlugin({

package.json

@@ -89,6 +89,7 @@
     "babel-core": "^5.8.22",
     "babel-eslint": "^4.0.10",
     "babel-loader": "5.3.2",
+    "babel-plugin-react-transform": "^1.0.2",
     "babel-runtime": "5.8.20",
     "better-npm-run": "0.0.2",
     "chai": "^3.2.0",
@@ -113,12 +114,14 @@
     "node-sass": "^3.2.0",
     "react-a11y": "0.2.6",
     "react-hot-loader": "1.3.0",
+    "react-transform-webpack-hmr": "^0.1.3",
     "redux-devtools": "^2.0.0",
     "sass-loader": "^2.0.0",
     "strip-loader": "^0.1.0",
     "style-loader": "^0.12.3",
     "webpack": "^1.9.11",
-    "webpack-dev-server": "1.10.1"
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.0.0"
   },
   "engines": {
     "node": ">=0.10.32"

server.babel.js

@@ -1,5 +1,15 @@
 //  enable runtime transpilation to use ES6/7 in node
-require('babel/register')({
-  stage: 0,
-  plugins: ['typecheck']
-});
+
+var fs = require('fs');
+
+var babelrc = fs.readFileSync('./.babelrc');
+var config;
+
+try {
+  config = JSON.parse(babelrc);
+} catch (err) {
+  console.error('==>     ERROR: Error parsing your .babelrc.');
+  console.error(err);
+}
+
+require('babel/register')(config);

webpack/dev.config.js

@@ -7,15 +7,14 @@ var port = parseInt(process.env.PORT) + 1 || 3001;
 
 // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
 var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
-var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'))
+var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
 
 module.exports = {
   devtool: 'inline-source-map',
   context: path.resolve(__dirname, '..'),
   entry: {
     'main': [
-      'webpack-dev-server/client?http://' + host + ':' + port,
-      'webpack/hot/only-dev-server',
+      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
       './src/client.js'
     ]
   },
@@ -27,7 +26,7 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?stage=0&optional=runtime&plugins=typecheck', 'eslint-loader']},
+      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel', 'eslint-loader']},
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
       { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }

webpack/prod.config.js

@@ -11,7 +11,7 @@ var assetsPath = path.join(__dirname, relativeAssetsPath);
 
 // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
 var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
-var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'))
+var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
 
 module.exports = {
   devtool: 'source-map',
@@ -27,7 +27,7 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel?stage=0&optional=runtime&plugins=typecheck']},
+      { test: /\.js$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
       { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }

webpack/webpack-dev-server.js

@@ -1,21 +1,33 @@
-var WebpackDevServer = require('webpack-dev-server'),
-  webpack = require('webpack'),
-  config = require('./dev.config'),
-  host = process.env.HOST || 'localhost',
-  port = parseInt(process.env.PORT) + 1 || 3001,
-  serverOptions = {
-    contentBase: 'http://' + host + ':' + port,
-    quiet: true,
-    noInfo: true,
-    hot: true,
-    inline: true,
-    lazy: false,
-    publicPath: config.output.publicPath,
-    headers: {"Access-Control-Allow-Origin": "*"},
-    stats: {colors: true}
-  },
-  webpackDevServer = new WebpackDevServer(webpack(config), serverOptions);
+var Express = require('express');
+var webpack = require('webpack');
 
-webpackDevServer.listen(port, host, function() {
-  console.info('==> 🚧  Webpack development server listening on %s:%s', host, port);
+var config = require('../src/config');
+var webpackConfig = require('./dev.config');
+var compiler = webpack(webpackConfig);
+
+var host = process.env.HOST || 'localhost';
+var port = parseInt(config.port, 10) + 1 || 3001;
+var serverOptions = {
+  contentBase: 'http://' + host + ':' + port,
+  quiet: true,
+  noInfo: true,
+  hot: true,
+  inline: true,
+  lazy: false,
+  publicPath: webpackConfig.output.publicPath,
+  headers: {'Access-Control-Allow-Origin': '*'},
+  stats: {colors: true}
+};
+
+var app = new Express();
+
+app.use(require('webpack-dev-middleware')(compiler, serverOptions));
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.listen(port, function onAppListening(err) {
+  if (err) {
+    console.error(err);
+  } else {
+    console.info('==> 🚧  Webpack development server listening on port %s', port);
+  }
 });