How to resolve you cannot change <Router routes>; it will be ignored with webpack?

Question

I am trying to implement HMR for react/webpack/gulp, this is my component:

import React from 'react';

class main extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {

        return (
            <div>Hi this is fdsfdsfs</div>
        );
    }
}

export default main;

This is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './main';


ReactDOM.render(
    <main/>
 ,
  document.getElementById('root')
);

When I change a file I get:

 client:37 [WDS] App updated. Recompiling...
only-dev-server.js:69 [HMR] Checking for updates on the server...
client:37 [WDS] App hot update...
browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will 
log-apply-result.js:20 [HMR] Updated modules:
log-apply-result.js:22 [HMR]  - 320
log-apply-result.js:22 [HMR]  - 273
log-apply-result.js:22 [HMR]  - 77
only-dev-server.js:55 [HMR] App is up to date.

The questions is how to resolve:

 you cannot change <Router routes>; it will be ignored with webpack

See also here

Answer 1

This issue is caused by react-router v2 and v3.

The boilerplate you used has a dependency to react-router, and is using it in src/routes.js.

This is actually non trivial to resolve with this version of react-router (see here : https://github.com/ReactTraining/react-router/issues/2982 or here : https://github.com/gaearon/react-hot-loader/issues/68)

You could also implement react-router v4 which is in prerelease state (https://github.com/ReactTraining/react-router/tree/v4)