DEV Community

Rex
Rex

Posted on • Updated on

Enable Hot Module Replacement(HMR) in Nrwl/Nx React Project

HMR offer many benefits. Here is a quote from the official webpack website:

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

Retain application state which is lost during a full reload.

Save valuable development time by only updating what's changed.

Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.

Nrwl/Nx for React doesn't come with HMR by default. There is a long-standing issue for this and I waited for a workable solution for a long time, and finally, we got it. So the solution is in the issue and this blog is to save everybody's time trying to piece together a workable solution.

  1. Add below to package.json in the devDependencies section and install.

    "webpack": "^4.46.0", (5.x doesn't work)
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "react-refresh": "^0.10.0",
    
  2. Create a new file webpack.config.js or another name, to host your custom webpack configuration, I put it in my app folder

  3. Edit workspace.json to configure Nx to use the above custom webpack configuration.
    Find projects/[your app]/targets/build/options section, add this line to the end of the options section: "webpackConfig": "[path to]/webpack.config.js. ([your app] is your app's name.)
    Mine looks like this:

  4. update file .babelrc to add react-refresh/babel plugin. Mine looks like this:

After above, you would see something like this in your console:

[WDS] App updated. Recompiling...
reloadApp.js:19 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR] - ../../../libs/[path of changed file here]
log.js:24 [HMR] App is up to date.

What I love about it is that I know exactly when the app is up to date, no more guessing. It is so much better than the silent console of Create React App. I had to go to the Network tab to see if the app is updated; I ended up refreshing the browser most of the time to be sure the update has taken place.

Update: 25/05/2021

After two weeks of using the shining new HMR above, I am back to report that I am very happy with the solution.

I repeat, I love that NX tells me when exactly the app is hot loaded and up to date, making it better than react-react-app, which is silence on hot reload in the console(last time I tried, two months back).

A few things to note:

  1. stick to one export per file to make HMR work consistently
  2. when adding/removing hooks, HMR fails and an error message appears. make sense, nothing to complain
  3. react-refresh catches all console error messages and make them full screen, at first it is kinda annoying because of some vendor error, then I realised that it is there for a good reason, it forces me to fix the errors even if it is from third-party libraries, from which I always learn something new.

Top comments (3)

Collapse
 
dannysofftie profile image
Danny Sofftie

This saved me 2 days of research

Collapse
 
starkhk profile image
Hemant Kaushik • Edited

Will this work in Nexj v13 too?

Collapse
 
rexebin profile image
Rex

Not sure, the latest nx now come with HMR enabled by default. Vite has HMR too. Toolings are getting better😄