Fix hot reloading

Thanks to reduxjs/redux#1455

Author: Daniel Levitt

.babelrc

@@ -2,18 +2,5 @@
   "presets": ["es2015", "stage-2", "react"],
   "plugins": [
     "transform-class-properties"
-  ],
-  "env": {
-    "development": {
-      "plugins": [
-        ["react-transform", {
-          "transforms": [{
-            "transform": "react-transform-hmr",
-            "imports": ["react"],
-            "locals": ["module"]
-          }]
-        }]
-      ]
-    }
-  }
+  ]
 }

app/scripts/index.jsx

@@ -1,11 +1,9 @@
 import 'intl';
 import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createHashHistory } from 'history';
-import { Router, useRouterHistory } from 'react-router';
-import { IntlProvider } from 'react-intl';
-import routes from 'routes/routes';
+import { useRouterHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { store } from 'stores/configureStore';
 import 'styles/base.css';
@@ -16,12 +14,32 @@ const appHistory = syncHistoryWithStore(hashHistory, store);
 const state = store.getState();
 const target = document.getElementById('app');
 
-const node = (
-  <Provider store={store}>
-    <IntlProvider locale={state.settings.intlData.id} messages={state.settings.intlData.messages}>
-      <Router history={appHistory}>{routes}</Router>
-    </IntlProvider>
-  </Provider>
-);
+let render = () => {
+  const Root = require('./root').default;
+  ReactDOM.render(
+    <Provider store={store}>
+      <Root {...{ state, appHistory }} />
+    </Provider>,
+    target
+  );
+};
 
-render(node, target);
+if (module.hot) {
+  const renderApp = render;
+  const renderError = (err) => {
+    const RedBox = require('redbox-react');
+    ReactDOM.render(<RedBox error={err} />, target);
+  };
+
+  render = () => {
+    try {
+      renderApp();
+    } catch (err) {
+      renderError(err);
+    }
+  };
+
+  module.hot.accept('./root', () => setTimeout(render));
+}
+
+render();

app/scripts/root.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Router } from 'react-router';
+import { IntlProvider } from 'react-intl';
+import routes from 'routes/';
+
+export default ({ state, appHistory }) => (
+  <IntlProvider locale={state.settings.intlData.id} messages={state.settings.intlData.messages}>
+    <Router history={appHistory} routes={routes} />
+  </IntlProvider>
+);

app/scripts/routes/index.js

@@ -0,0 +1,16 @@
+import { App, Playlist, Settings } from 'containers/';
+import { ImportOptions, ImportKakapo, ImportSearch, ImportCustomUrl } from 'components/';
+
+export default {
+  path: '/',
+  component: App,
+  indexRoute: { component: ImportOptions },
+  childRoutes: [
+    { path: 'settings', component: Settings },
+    { path: 'kakapo', component: ImportKakapo },
+    { path: 'youtube', component: ImportSearch },
+    { path: 'soundcloud', component: ImportSearch },
+    { path: 'custom', component: ImportCustomUrl },
+    { path: 'playlist(/:playlistId)', component: Playlist }
+  ]
+};

app/scripts/routes/routes.jsx

@@ -10,21 +10,10 @@ function configureStore(debug = false) {
   /* istanbul ignore if */
   if (debug) enhancer.push(devTools());
 
-  const store = compose(...enhancer)(createStore)(
+  return compose(...enhancer)(createStore)(
     rootReducer,
     window.__INITIAL_STATE__
   );
-
-  /* istanbul ignore if */
-  if (module.hot) {
-    module.hot.accept('../reducers', () => {
-      const nextRootReducer = require('../reducers/index');
-
-      store.replaceReducer(nextRootReducer);
-    });
-  }
-
-  return store;
 }
 
 export const store = configureStore(__DEV__ && !__TEST__);

app/scripts/stores/configureStore.js

@@ -41,7 +41,6 @@
     "babel-cli": "^6.6.5",
     "babel-eslint": "^5.0.0",
     "babel-loader": "^6.2.4",
-    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
@@ -88,7 +87,7 @@
     "postcss-nested": "^1.0.0",
     "rcedit": "^0.4.0",
     "react-addons-test-utils": "^0.14.7",
-    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.2.2",
     "remote-redux-devtools": "^0.1.4",
     "request": "^2.69.0",
     "sinon": "^1.17.3",

package.json

@@ -37,11 +37,6 @@ const config = {
   debug: DEBUG,
   devtool: DEBUG ? '#eval' : false,
   plugins: [
-    new webpack.ProvidePlugin({
-      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
-    }),
-    new webpack.IgnorePlugin(/react\/lib\/ReactContext/),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(DEBUG ? 'development' : 'production')
@@ -51,6 +46,11 @@ const config = {
       __DEV__: DEBUG,
       __TEST__: TEST
     }),
+    new webpack.ProvidePlugin({
+      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
+    }),
+    new webpack.IgnorePlugin(/react\/lib\/ReactContext/),
+    new webpack.optimize.OccurenceOrderPlugin(),
     new ExtractTextPlugin('styles.css'),
     ...(!DEBUG ? [
       new webpack.optimize.DedupePlugin(),
@@ -61,9 +61,7 @@ const config = {
         }
       }),
       new webpack.optimize.AggressiveMergingPlugin()
-    ] : [
-      new webpack.NoErrorsPlugin()
-    ]),
+    ] : []),
     ...(!TEST ? [ new webpack.HotModuleReplacementPlugin() ] : [])
   ],
   module: {