Reloading/Re-rendering Issue — Hot Module Reload (HMR) on WSL

Dong Xia
1 min readMar 2, 2023

--

Quick Fix

Building an app with React, Angular, or Vue. When there is a change that have been made, the app will re-render itself will the latest changes.

For example, after starting the server on localhost. If you change a <h1> tag “Hello” to “Hello There”. The page will automatically re-render itself to reflect the change. It will now display`Hello There`.

However you might noticed that running it on WSL terminal won’t detect the changes. Refreshing the page, nothing happens. Shutting down the server and restarting it works for that instant but any following changes remain the same. Restarting it constantly is a pain. Instead use the windows powershell terminal. It because how partition are being stored and read.

From the powershell terminal install the `node_modules` folder.

  1. Open powershell terminal
  2. CD into your project folder
  3. Use `npm install`. This will update/overwrite the node_modules folder from the `npm install` from the WSL
  4. Now run the server. It should now detect any changes that was made

--

--

Dong Xia
Dong Xia

Written by Dong Xia

Copy and Paste what’s on my mind. Perfect.

No responses yet