HMR reloads page

[SCullman]

Description

Instead of replacing the modified code, the whole page gets reloaded

Repro code

• Follow all instructions from the docs
• Instead of serving everything from webdevserver, link to the bundled script file and serve everything else from a second server (a CMS in my case)

Expected results

On an App update, it should just reload the new js module, and the state should remain.

Actual results

However, the page including the new code is reloaded, but the state is gone.

[SCullman]

This is by design. https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07

HMR is informed about the code changes and tries to fetch the changes from the second server instead of the webdevserver. This fails with a 404, and it reloads the whole page.

Fix

HMR needs to know where to pull the changes from. Add the following options to webpack.config.js:

  output: {
   ....
    publicPath: 'http://localhost:8080/'
  },
 ...
devServer: {
    ...
    headers: { "Access-Control-Allow-Origin": "*" },
    ...
  },

Tip

Enable "Preserve log" in Chrome in the console options.