How to fix the NextJS HMR(hot reload) not working error on WSL2

While working on your NextJS application inside WSL2, you may have noticed that your saved changes do not immediately reflect on your application. This means that you will have to go through the tedious process of constantly restarting your local development server so that you can see your changes reflected.

Fear not, I come forth with a potential fix for this. The results tend to vary so don't hesitate to leave a comment with your particular scenario so that we can fix it.

The Problem…

When working on NextJS applications inside WSL2, there seems to be an issue with HMR (Hot Reload) not detecting changes to your code on save. This results in constantly refreshing the server so that you can view your changes.

The Solution (The fix that worked for me)…

After upgrading to WSL2 we are constantly advised to move our workspace from the Windows environment to the Linux environment for performance purposes.

use_linux_environment_instead_of_windows_environment_for_performance.jpg

Our first step will be to copy our current workspace inside windows to our Linux workspace inside WSL2.

cp –R <source_folder> <destination_folder>

e.g
cp -R /mnt/c/<your_folder_name> /home

Now that we are inside the Linux environment, we can start doing some house keeping by first deleting the node_modules folder and the package-lock.json file.

rm –r node_modules package-lock.json

After that you can run the npm install command to install all the necessary dependencies for the project.

After all the dependencies have been installed you can launch your text editor and start working inside your new environment without any errors.

Congratulations on fixing this error with me!!

Additional Info…

Incase you get some error related to write access when trying to edit files inside your folder you can use the chown command in Linux to give ownership access to your specific folder.

sudo chown –R <username> <folder_name>

With that problem solved you can now continue with your development and enjoy the many benefits of NextJS and a Linux environment inside WSL2.

If this guide was helpful, don't hesitate to drop a like and a comment. Happy coding.

How to fix the NextJS HMR(hot reload) not working error on WSL2

Comments

More from this blog

What Does "!" Symbol Mean in Typescript?

How to convert your JavaScript object literals to Typescript

How to use the Javascript Set() ES6 method — 100daysofleetcode epiphany

How to use npm instead of yarn with the “expo init” cli (react native tip)

How to use Environment Variables in Vite(React Template Example)

Command Palette

Comments

More from this blog