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

tl:dr - Transfer your workspace files from the windows environment to the Linux environment


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.

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.