Create-react-app: HMR with webpack

[f0rr0]

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.

[f0rr0]

@gaearon Thanks for clarifying this. You're right I'm using webpack 2 and yes, the state is lost. I'm currently working on adding react-hot-loader 3 into the mix. The problem was that the refresh wasn't working. I'll test the code you wrote with webpack 1

[jonstuebe]

Even if there's something that's unstable is there any way to support preserving component state on a HMR @gaearon?

[gausie]

As CRA now uses Webpack 2, is there any change to the preferred way of doing this?

[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.