use react-transform

.babelrc

@@ -1,4 +1,21 @@
 {
   "stage": 2,
-  "optional": ["es7.classProperties"]
+  "optional": ["es7.classProperties"],
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
 }

.eslintignore

@@ -1,2 +1,3 @@
 **/node_modules/
 **/build/
+lib

.eslintrc

@@ -207,6 +207,9 @@
     "wrap-regex": [2],
     "yoda": [2, "never", {
       "exceptRange": true
-    }]
+    }],
+    "react/jsx-uses-react": [2],
+    "react/jsx-uses-vars": [2],
+    "react/react-in-jsx-scope": [2]
   }
 }

components/app/index.jsx

@@ -2,11 +2,24 @@ import React from 'react';
 import style from './style';
 
 const App = (props) => {
+  let className = style.root;
+  if (props.className) {
+    className += ` ${props.className}`;
+  }
+
   return (
-    <app className={style.app}>
+    <div className={className}>
       {props.children}
-    </app>
+    </div>
   );
 };
 
+App.propTypes = {
+  className: React.PropTypes.string
+};
+
+App.defaultProps = {
+  className: ''
+};
+
 export default App;

components/app/style.scss

@@ -1,6 +1,6 @@
 @import "../commons";
 
-.app {
+.root {
   position: absolute;
   top: 0;
   left: 0;

components/app_bar/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import style from './style';
 
 const AppBar = (props) => {
-  let className = style.appbar;
+  let className = style.root;
   if (props.className) className += ` ${props.className}`;
   if (props.fixed) className += ` ${style.fixed}`;
   if (props.flat) className += ` ${style.flat}`;

components/app_bar/style.scss

@@ -1,7 +1,7 @@
 @import "../base";
 @import "./config";
 
-.appbar {
+.root {
   display: flex;
   height: $appbar-height;
   align-items: center;

components/index.js

@@ -1,35 +1,39 @@
-export default {
-  App: require('./app'),
-  AppBar: require('./app_bar'),
-  Autocomplete: require('./autocomplete'),
-  Button: require('./button'),
-  Card: require('./card'),
-  Checkbox: require('./checkbox'),
-  DatePicker: require('./date_picker'),
-  Dialog: require('./dialog'),
-  Drawer: require('./drawer'),
-  Dropdown: require('./dropdown'),
-  FontIcon: require('./font_icon'),
-  Form: require('./form'),
-  Input: require('./input'),
-  Link: require('./link'),
-  List: require('./list/list'),
-  ListItem: require('./list/item'),
-  ListDivider: require('./list/divider'),
-  ListCheckbox: require('./list/checkbox'),
-  ListSubHeader: require('./list/subheader'),
-  Menu: require('./menu/menu'),
-  MenuItem: require('./menu/menu_item'),
-  MenuDivider: require('./menu/menu_divider'),
-  IconMenu: require('./menu/icon_menu'),
-  Navigation: require('./navigation'),
-  ProgressBar: require('./progress_bar'),
-  RadioGroup: require('./radio/radio_group'),
-  RadioButton: require('./radio/radio_button'),
-  Ripple: require('./ripple'),
-  Slider: require('./slider'),
-  Switch: require('./switch'),
-  Tab: require('./tabs/tab'),
-  Tabs: require('./tabs/tabs'),
-  TimePicker: require('./time_picker')
-};
+import App from './app';
+import AppBar from './app_bar';
+import Autocomplete from './autocomplete';
+import Button from './button';
+import Card from './card';
+import Checkbox from './checkbox';
+import DatePicker from './date_picker';
+import Dialog from './dialog';
+import Drawer from './drawer';
+import Dropdown from './dropdown';
+import FontIcon from './font_icon';
+import Form from './form';
+import Input from './input';
+import Link from './link';
+import List from './list/list';
+import ListItem from './list/item';
+import ListDivider from './list/divider';
+import ListCheckbox from './list/checkbox';
+import ListSubHeader from './list/subheader';
+import Menu from './menu/menu';
+import MenuItem from './menu/menu_item';
+import MenuDivider from './menu/menu_divider';
+import IconMenu from './menu/icon_menu';
+import Navigation from './navigation';
+import ProgressBar from './progress_bar';
+import RadioGroup from './radio/radio_group';
+import RadioButton from './radio/radio_button';
+import Ripple from './ripple';
+import Slider from './slider';
+import Switch from './switch';
+import Tab from './tabs/tab';
+import Tabs from './tabs/tabs';
+import TimePicker from './time_picker';
+
+export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
+  Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
+  ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
+  IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
+  Switch, Tab, Tabs, TimePicker };

components/menu/menu_divider.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import style from './style.menu_divider';
 

docs/.babelrc

@@ -0,0 +1,20 @@
+{
+  "stage": 0,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}

docs/app/app.jsx

@@ -1,12 +0,0 @@
-/*eslint-disable no-unused-vars*/
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Router from 'react-router';
-import AppRoutes from './app-routes';
-import createHashHistory from 'history/lib/createHashHistory';
-
-ReactDOM.render(
-  <Router history={createHashHistory({queryKey: false})}>
-    {AppRoutes}
-  </Router>
-, document.getElementById('app'));

docs/app/components/layout/home/index.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import style from './style';
 import Logo from '../../logo';

docs/app/components/layout/home/style.scss

@@ -1,4 +1,3 @@
-@import "~react-toolbox/base";
 @import "../../globals";
 @import "./config";
 

docs/app/components/layout/main/appbar.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { AppBar } from 'react-toolbox';
 import { Link } from 'react-router';

docs/app/components/layout/main/component.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import ToolboxComponents from './components';
 import style from './style';

docs/app/components/layout/main/drawer.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import ToolboxComponents from './components';
 import { List, ListItem } from 'react-toolbox';

docs/app/components/layout/main/index.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import MainAppBar from './appbar';
 import MainDrawer from './drawer';

docs/app/components/layout/main/playground.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import Playground from '../../playground';
 import code from '../../../examples/example.txt';

docs/app/components/layout/main/style.scss

@@ -3,7 +3,7 @@
 @import "./config";
 
 .appbar {
-  composes: appbar from "react-toolbox/app_bar/style";
+  composes: root from "react-toolbox/app_bar/style";
   background: $color-primary-dark;
 }
 

docs/app/components/navigation/index.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { Link } from 'react-router';
 

docs/app/components/preview/index.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-eval*/
 import React from 'react';
 import ReactDOM from 'react-dom';
 import babel from 'babel-core/browser';
@@ -71,6 +70,8 @@ const Preview = React.createClass({
 
     try {
       const compiledCode = this.compileCode();
+
+      /*eslint-disable no-eval*/
       const Component = eval(compiledCode).apply(null, scope);
       ReactDOM.render(Component, mountNode);
       if (this.state.error) {

docs/app/docs.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Router from 'react-router';
+import routes from './routes';
+
+const Docs = props => {
+  return (
+    <Router history={props.history}>
+      {routes}
+    </Router>
+  );
+};
+
+Docs.propTypes = {
+  history: React.PropTypes.object
+};
+
+export default Docs;

docs/app/history.js

@@ -0,0 +1,2 @@
+import {createHashHistory} from 'history';
+export default createHashHistory();

docs/app/index.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import history from './history';
+import Docs from './docs';
+
+ReactDOM.render(<Docs history={history}/>, document.getElementById('app'));

docs/app/routes.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { App } from 'react-toolbox';
 import { Route, IndexRoute } from 'react-router';
@@ -7,7 +6,7 @@ import Main from './components/layout/main';
 import Playground from './components/layout/main/playground';
 import Component from './components/layout/main/component';
 
-const Routes = (
+const routes = (
   <Route component={App}>
     <Route path="/" component={Home} />
     <Route component={Main}>
@@ -18,4 +17,4 @@ const Routes = (
   </Route>
 );
 
-export default Routes;
+export default routes;

docs/package.json

@@ -4,7 +4,8 @@
   "description": "Documentation for React Toolbox",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "scripts": {
-    "start": "UV_THREADPOOL_SIZE=100 node ./server"
+    "start": "node ./server",
+    "build": "NODE_ENV=production webpack --config ./webpack.config.production"
   },
   "dependencies": {
     "codemirror": "^5.8.0",
@@ -19,7 +20,9 @@
     "babel-core": "^5.8.23",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
     "css-loader": "^0.21.0",
+    "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
     "html-loader": "^0.3.0",
     "html-webpack-plugin": "^1.6.2",
@@ -27,12 +30,16 @@
     "node-sass": "^3.3.3",
     "postcss-loader": "^0.7.0",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^1.3.0",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.1.1",
     "sass-loader": "^3.0.0",
     "style-loader": "^0.13.0",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack": "^1.12.0",
-    "webpack-dev-server": "^1.12.1"
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.4.1"
   },
-  "repository": "github:react-toolbox/react-toolbox"
+  "repository": "github:react-toolbox/react-toolbox",
+  "license": "MIT"
 }

docs/server.js

@@ -1,22 +1,31 @@
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const config = require('./webpack.config.development');
-const devServer = {
-  host: '0.0.0.0',
-  port: 8080,
-  inline: true
-};
+process.env.UV_THREADPOOL_SIZE = Math.ceil(Math.max(4, require('os').cpus().length * 1.5));
 
-new WebpackDevServer(webpack(config), {
-  contentBase: 'www',
+const path = require('path');
+const express = require('express');
+const webpack = require('webpack');
+const config = require('./webpack.config.development');
+
+const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
   publicPath: config.output.publicPath,
-  historyApiFallback: false,
-  hot: true,
   stats: {
     colors: true
   }
-}).listen(devServer.port, devServer.host, (err) => {
-  if (err) console.error(err);
-  console.log(`Listening at ${devServer.host}:${devServer.port}`);
-  console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, './www/index.html'));
+});
+
+app.listen(8081, '0.0.0.0', (err) => {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  console.log('Listening at http://0.0.0.0:8081');
 });

docs/webpack.config.development.js

@@ -7,9 +7,8 @@ module.exports = {
   context: __dirname,
   devtool: '#eval-source-map',
   entry: [
-    'webpack-dev-server/client?http://0.0.0.0:8080',
-    'webpack/hot/only-dev-server',
-    './app/app.jsx'
+    'webpack-hot-middleware/client',
+    './app/index.jsx'
   ],
   output: {
     path: path.join(__dirname, 'build'),
@@ -33,7 +32,7 @@ module.exports = {
       {
         test: /(\.js|\.jsx)$/,
         exclude: /(node_modules)/,
-        loader: 'react-hot!babel'
+        loader: 'babel'
       }, {
         test: /(\.scss|\.css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
@@ -51,7 +50,7 @@ module.exports = {
   plugins: [
     new ExtractTextPlugin('docs.css', {allChunks: true}),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
     })

docs/webpack.config.production.js

@@ -7,8 +7,7 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  devtool: '#eval-source-map',
-  entry: ['./app/app.jsx'],
+  entry: ['./app/index.jsx'],
   output: {
     path: path.join(__dirname, 'build'),
     filename: 'docs.js'
@@ -33,7 +32,7 @@ module.exports = {
       {
         test: /(\.js|\.jsx)$/,
         exclude: /(node_modules)/,
-        loader: 'react-hot!babel'
+        loader: 'babel'
       }, {
         test: /(\.scss|\.css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
@@ -54,8 +53,12 @@ module.exports = {
         inject: false,
         template: path.resolve(__dirname, './www/index.html')
     }),
-    new TransferWebpackPlugin([
-      { from: 'www/images', to: 'images' }
-    ], path.resolve(__dirname, './'))
+    new TransferWebpackPlugin([{
+      from: 'www/images',
+      to: 'images'
+    }], path.resolve(__dirname, './')),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
   ]
 };

package.json

@@ -18,15 +18,15 @@
   "main": "./lib",
   "scripts": {
     "start": "node ./server",
+    "lint": "eslint ./ --ext .js,.jsx",
     "babel": "babel ./components --out-dir ./lib",
-    "build": "npm run lint && npm run babel && npm run sass",
+    "sass": "cpx './components/**/*.scss' ./lib",
+    "build": "npm run babel && npm run sass",
     "clean": "rimraf ./lib",
-    "lint": "eslint ./components ./spec ./example --ext .js,.jsx",
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
-    "sass": "node-sass ./components -o ./lib",
-    "test": "karma start",
-    "test:watch": "karma start --no-single-run"
+    "test": "NODE_ENV=test karma start",
+    "test:watch": "NODE_ENV=test karma start --no-single-run"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",
@@ -52,10 +52,13 @@
     "babel-core": "^5.8.23",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "cpx": "^1.2.1",
     "css-loader": "^0.21.0",
     "eslint": "^1.7.3",
     "eslint-plugin-react": "^3.3.1",
     "expect": "^1.8.0",
+    "express": "^4.13.3",
     "karma": "^0.13.3",
     "karma-chrome-launcher": "^0.2.0",
     "karma-cli": "^0.1.0",
@@ -63,23 +66,25 @@
     "karma-phantomjs-launcher": "~0.2",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.3",
-    "node-libs-browser": "^0.5.2",
     "node-sass": "^3.3.3",
     "normalize.css": "^3.0.3",
-    "object-assign": "^4.0.1",
+    "phantomjs": "^1.9.18",
     "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.7.0",
     "react": "^0.14",
     "react-addons-css-transition-group": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
     "react-dom": "^0.14.0",
-    "react-hot-loader": "^1.3.0",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.1.1",
     "rimraf": "^2.4.3",
     "sass-loader": "^3.0.0",
     "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.0",
-    "webpack-dev-server": "^1.12.1"
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.4.1"
   },
   "repository": "github:react-toolbox/react-toolbox"
 }

server.js

@@ -1,22 +1,31 @@
 process.env.UV_THREADPOOL_SIZE = Math.ceil(Math.max(4, require('os').cpus().length * 1.5));
 
+const path = require('path');
+const express = require('express');
 const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
 const config = require('./webpack.config.development');
-const devServer = {
-  host: '0.0.0.0',
-  port: 8080,
-  inline: true
-};
 
-new WebpackDevServer(webpack(config), {
+const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
   publicPath: config.output.publicPath,
-  historyApiFallback: false,
   stats: {
     colors: true
   }
-}).listen(devServer.port, devServer.host, (err) => {
-  if (err) console.error(err);
-  console.log(`Listening at ${devServer.host}:${devServer.port}`);
-  console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, './spec/index.html'));
+});
+
+app.listen(8080, '0.0.0.0', (err) => {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  console.log('Listening at http://0.0.0.0:8080');
 });

spec/components/button.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import Button from '../../components/button';
 

spec/components/font_icon.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import FontIcon from '../../components/font_icon';
 

spec/components/input.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import Input from '../../components/input';
 

spec/components/link.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import Link from '../../components/link';
 

spec/components/list.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';
 

spec/components/pickers.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';

spec/components/slider.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import Slider from '../../components/slider';
 

spec/components/tabs.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { Tabs, Tab } from '../../components/tabs';
 

spec/index.jsx

@@ -1,6 +1,5 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './app';
+import Root from './root';
 
-ReactDOM.render(<App/>, document.getElementById('toolbox-test'));
+ReactDOM.render(<Root />, document.getElementById('toolbox-test'));

spec/root.jsx

@@ -1,6 +1,5 @@
-/*eslint-disable no-unused-vars*/
 import React from 'react';
-import commons from '../components/commons';
+import App from '../components/app';
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
@@ -21,32 +20,30 @@ import Switch from './components/switch';
 import Tabs from './components/tabs';
 import style from './style';
 
-const App = () => {
-  return (
-    <app className={`${commons.app} ${style.app}`}>
-      <h1>React Toolbox</h1>
-      <h3>Component Spec v0.10.20</h3>
+const Root = () => (
+  <App className={style.app}>
+    <h1>React Toolbox</h1>
+    <h3>Component Spec v0.10.20</h3>
 
-      <Autocomplete />
-      <Button />
-      <Card />
-      <Checkbox />
-      <Dialog />
-      <Drawer />
-      <Dropdown />
-      <IconMenu />
-      <Input />
-      <List />
-      <Menu />
-      <Pickers />
-      <Progress />
-      <Radio />
-      <Slider />
-      <Snackbar />
-      <Switch />
-      <Tabs />
-    </app>
-  );
-};
+    <Autocomplete />
+    <Button />
+    <Card />
+    <Checkbox />
+    <Dialog />
+    <Drawer />
+    <Dropdown />
+    <IconMenu />
+    <Input />
+    <List />
+    <Menu />
+    <Pickers />
+    <Progress />
+    <Radio />
+    <Slider />
+    <Snackbar />
+    <Switch />
+    <Tabs />
+  </App>
+);
 
-export default App;
+export default Root;

webpack.config.development.js

@@ -1,14 +1,12 @@
 const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const devServer = 'http://0.0.0.0:8080';
 
 module.exports = {
   context: __dirname,
   devtool: '#eval-source-map',
   entry: [
-    'webpack-dev-server/client?' + devServer,
-    'webpack/hot/only-dev-server',
+    'webpack-hot-middleware/client',
     './spec/index.jsx'
   ],
   output: {
@@ -24,7 +22,7 @@ module.exports = {
       {
         test: /(\.js|\.jsx)$/,
         exclude: /(node_modules)/,
-        loader: 'react-hot!babel'
+        loader: 'babel'
       }, {
         test: /(\.scss|\.css)$/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
@@ -34,7 +32,7 @@ module.exports = {
   postcss: [autoprefixer],
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
     })

webpack.config.test.js

@@ -7,7 +7,7 @@ module.exports = {
       {
         test: /(\.js|\.jsx)$/,
         exclude: /(node_modules)/,
-        loader: 'react-hot!babel'
+        loader: 'babel'
       }, {
         test: /(\.scss|\.css)$/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'