Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reload on Save is triggering full HMR reload

See original GitHub issue

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 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/

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:19 (8 by maintainers)

github_iconTop GitHub Comments

aleembcommented, Aug 10, 2016

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

dzannotticommented, Sep 29, 2016

For those reaching here from google, you can technically add

if ( {'./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)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack HMR - force a refresh from the client - Stack Overflow
I would like to be able to manually trigger a hot reload from the browser even when no new update is available. I...
Read more >
Hot Module Replacement - webpack
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up ......
Read more >
HMR + Fast Refresh - Snowpack
HMR + Fast Refresh. Hot Module Replacement (HMR) is the ability to push file updates to the browser without triggering a full page...
Read more >
HMR API - Vite
'vite:beforeFullReload' when a full reload is about to occur; 'vite:beforePrune' when modules that are no longer needed are about to be pruned; 'vite:invalidate ......
Read more >
Basic Features: Fast Refresh - Next.js
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found