Reload on Save is triggering full HMR reload

Hi It’s been a while since I have set up a new React project with HMR functionality so I apologize if this is known and/or expected.

When I create-react-app new-app and npm start updates to App.js are reloaded but the webpack HMR is doing a full reload.

My specific steps were

1. create new app with create-react-app
2. start app and visit index with npm start (browser window opened automatically
3. Changed App.js line 14:

To get started, edit <code>src/App.js</code> and save to reload.

to

To get started, edit <code>src/App.js</code> and save to reload.............

1. reviewed the browser console and saw:

[WDS] App updated. Recompiling...
client:90 [WDS] App hot update...
dev-server.js:55 [HMR] Checking for updates on the server...
dev-server.js:18 [HMR] Cannot apply update. Need to do a full reload!
dev-server.js:19 [HMR] Error: Aborted because 256 is not accepted
    at hotApply (http://localhost:3000/static/js/bundle.js:391:31)
    at hotUpdateDownloaded (http://localhost:3000/static/js/bundle.js:304:13)
    at hotAddUpdateChunk (http://localhost:3000/static/js/bundle.js:284:13)
    at webpackHotUpdateCallback (http://localhost:3000/static/js/bundle.js:5:12)
    at http://localhost:3000/0.0234ed6f7496ad680301.hot-update.js:1:1

I know there are some limitations with HMR and react hot reloader so if this is expected per the configuration then I’ll quickly close this issue but it was surprising behavior to me

[aleemb]

@gaearon hot reload is the primary reason I came looking here. If you could have a dev channel with hot reload, a lot of people would find it useful.

[dzannotti]

For those reaching here from google, you can technically add

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

to your src/App.js and it’ll work. Please do note that HMR for React/dom is not stable yet, and has downsides (which is why it’s not enabled by default).

💀 use at your own risk 💀

(imho still better than ejecting)