HMR with webpack

Description

HMR does not work.

Expected behavior

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';

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

if (module.hot) {
  module.hot.accept('./components/App', () => {
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
  });
}

Hot updates should refresh page.

Actual behavior

Nothing happens.

see https://github.com/webpack/webpack-dev-server/issues/206

https://github.com/facebookincubator/create-react-app/blob/88c15d0988fcb456fc976cbe15823ed518470126/packages/react-scripts/scripts/start.js#L221 uses hot option and https://github.com/facebookincubator/create-react-app/blob/88c15d0988fcb456fc976cbe15823ed518470126/packages/react-scripts/config/webpack.config.dev.js#L206 uses the plugin.

Removing either solved it for me.

[gaearon]

Removing either solved it for me.

I don’t think it “solved” the problem for you, it just refreshed the page.

Your example doesn’t work because it is written for Webpack 2. We still use Webpack 1. Here’s the version that works with Webpack 1:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';

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

if (module.hot) {
  module.hot.accept('./components/App', () => {
    var NextApp = require('./components/App').default;
    ReactDOM.render(
      <NextApp />,
      document.getElementById('root')
    );
  });
}

Note that this resets internal state of components. Create React App doesn’t currently support preserving component state on hot reloading.

[Timer]

The examples you see are still the recommended way to do this.

However, no stable release depends on webpack 2. Please use the webpack 1 example for now. It should continue to work when we switch to 2.