Hot reload does not work for the components pass to React-Router V3

[zation]

I have a project https://github.com/zation/react-admin-starter used React-Router 3.0.5 / react-hot-loader 3.0.0-beta.7. I found the hot reload does not work for all the components pass to React-Router, for example: modules/account/containers/profile.js. It only works for the nested components, for example: modules/account/components/profile-form.js.

Below is part of my webpack config:

module.exports = {
  entry: {
    app: DEBUG ? [
      'react-hot-loader/patch',
      './src/index.js',
    ] : './src/index.js',
  },

  // ...

  devServer: {
    compress: true,
    historyApiFallback: true,
    hot: true,
    overlay: true,
    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'config')],
  },
};

Below is my .babelrc:

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread",
    "transform-class-properties",
    "transform-exponentiation-operator",
    ["import", {
      "libraryName": "antd"
    }]
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "mocker": {
      "presets": [
        ["env", {
          "targets": {
            "node": "current"
          }
        }]
      ]
    }
  }
}

Below is my entry file:

import { polyfill } from 'es6-promise';
import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { AppContainer } from 'react-hot-loader';

import createStore from './create-store';
import Root from './root';

polyfill();

const store = createStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store);

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component history={history} store={store} />
    </AppContainer>,
    document.getElementById('root'),
  );
};

render(Root);

// eslint-disable-next-line no-undef
if (DEBUG && module.hot) {
  module.hot.accept('./reducers', () => {
    // eslint-disable-next-line global-require
    store.replaceReducer(require('./reducers').default);
  });
  module.hot.accept('./root', () => render(Root));
}

For more details please check: https://github.com/zation/react-admin-starter . Thanks very much for your help!

[milooy]

Same happens here.

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
  "plugins": ["react-hot-loader/babel"]
}

app.js

let combinedReducers = combineReducers({ ...reducers, routing: routerReducer, form: formReducer });
let store, DevTools;
if (isProduction) {
  store = createStore(combinedReducers, applyMiddleware(ReduxPromise));
} else {
  DevTools = createDevTools(
    <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
      <LogMonitor theme="tomorrow" preserveScrollTop={false} />
    </DockMonitor>
  );
  store = createStore(
    combinedReducers,
    DevTools.instrument(),
    applyMiddleware(ReduxPromise)
  );
}

const history = syncHistoryWithStore(browserHistory, store);

import render from './router.js'
let container = document.getElementById('mount');

if (module.hot) {
  module.hot.accept('./reducers', () => {
    const nextReducers = require('./reducers');
    const nextRootReducer = combineReducers({
      ...nextReducers,
      routing: routerReducer,
      form: formReducer
    });
    store.replaceReducer(nextRootReducer);
  });
}
render({ store, history, container });

if (module.hot) {
  module.hot.accept('./router', () => {
    const newRender = require('./router').default;
    newRender({ store, history, container });
  });
}

router.js - Router version

export default function render({ store, history, container }) {
  ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={Home}/>
          <Route path="retailerShipping" component={RetailerShipping}/>
        </Route>
      </Router>
    </Provider>,
    container
  );
}

router.js : simple version

export default function render({ store, history, container }) {
  ReactDOM.render(
    <Provider store={store}>
      <div>
        <h1>HOT</h1>
        <MyTest mainName="Jay">JAJAJA</MyTest>
      </div>
    </Provider>,
    container
  );
}

In case of simple version, the hot reloading works
but in router version, it causes warning message and hot reload doesn't work

[gregberge]

React router v3 is not supported, if you want Hot Loader support, please use v4.