HMR not working

Current Behavior

After updating the project from v14x to v15x the HMR stopped working. Now, whenever I make a change in a react component, a whole screen gets reloaded.

Expected Behavior

Yes, this is a regression. HMR used to work.

Code

"serve": {
      "executor": "@nrwl/webpack:dev-server",
      "options": {
        "buildTarget": "app:build:development",
        "port": 4203,
        "hmr": true,
        "liveReload": false
      },
      "configurations": {
        "qas": {
          "buildTarget": "app:build:qas",
          "hmr": false
        },
        "production": {
          "buildTarget": "app:build:production",
          "hmr": false
        }
      }
    },

Failure Logs

The same behavior is with or without the Live Reloading option enabled.

[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading disabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...

And although the HMR reports that it is ready and waiting for updates, the whole screen reload still occurs.

Environment

   Node : 16.14.0
   OS   : linux x64
   yarn : 3.2.4
   
   nx : 15.0.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.0.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.3
   @nrwl/js : 15.0.3
   @nrwl/linter : 15.0.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.0.3
   @nrwl/schematics : 8.12.11
   @nrwl/storybook : 15.0.3
   @nrwl/web : 15.0.3
   @nrwl/webpack : 15.0.3
   @nrwl/workspace : 15.0.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

[stolenng-carelon]

I had same issue also, tried to play with the versions but didn’t help. I disabled hmr: false in project.json and then added custom webpack with:

const { merge } = require('webpack-merge');
const nxConfig = require('@nrwl/react/plugins/webpack');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = (config, context) => {
  const isProduction = config.mode === 'production';


  if (!isProduction) {
    config.devServer = {
      ...config.devServer,
      hot: true,
    };

    config.plugins.push(new ReactRefreshPlugin());
  }


  return merge(config, nxConfig);
};

found this guide for reference: https://dev.to/rexebin/enable-hot-module-replacement-hmr-in-nrwl-nx-react-project-1hh5

[nemonemi]

I’ve actually used this solution before the NX implemented its support through the config, so for it to stop working, I would call it a regression.

@ndcunningham I’ll make a reproducible sample as soon as I find time (asap).