nx: HMR not working - webpack custom config issue v15.4.2

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.3.1
   
   nx : 15.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.4.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.4.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.4.2
   @nrwl/js : 15.4.2
   @nrwl/linter : 15.4.2
   @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.4.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.4.2
   @nrwl/schematics : 8.12.11
   @nrwl/storybook : 15.4.2
   @nrwl/web : 15.4.2
   @nrwl/webpack : 15.4.2
   @nrwl/workspace : 15.4.2
   @nrwl/vite : 15.4.2
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 21 (3 by maintainers)

Most upvoted comments

I’ll take a look at that issue, thanks.

jaysoo on Feb 10, 2023

I found out what causes the issue. If I use the default Webpack config “@nrwl/react/plugins/webpack” it works, however, if I extend it, then it stops working.

This should be enough to reproduce the error: project.json

"webpackConfig": "apps/not-working/webpack.config.ts"

apps/not-working/webpack.config.ts

// this config has to be referenced inside the project.json for the build target
import { merge } from 'webpack-merge';

module.exports = (config: any) => {
  return merge(config, {
    module: {
      rules: [
        {
          test: /\.pdf$/i,
          use: ['file-loader'],
        },
      ],
    },
  });
};

Reproducible repo: https://github.com/nemonemi/hmr-not-working-in-nx Custom Webpack config that breaks the HMR: https://github.com/nemonemi/hmr-not-working-in-nx/blob/main/apps/not-working/webpack.config.ts

@ndcunningham ?

nemonemi on Jan 19, 2023

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

stolenng-carelon on Dec 14, 2022