create-react-app: 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

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

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

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

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (8 by maintainers)

Most upvoted comments

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

aleemb on Aug 10, 2016

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)

dzannotti on Sep 29, 2016

No until it is implemented in a proper stable way.

We are adding the error box in 0.10 which is a good first step towards this. We will look at enabling it for functional components at some point after that.

gaearon on Apr 27, 2017

@aleemb If you’d like, you can contribute “Adding Storybook” to the Usage Guide.

gaearon on Sep 21, 2016

For my purposes, I added React StoryBook and was able to get HMR. It has the added advantage of showing the errors directly on the screen which has better visibility than having to look at the CLI manually for errors.

aleemb on Sep 21, 2016