DEV Community

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

Posted on • Originally published at

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>

cp -R /mnt/c/<your_folder_name> /home
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (7)

neeshsamsi profile image
Neesh Samsi

Hey, I thought there was seamless integration with the Windows File system and while I understand there's only so much you can do but is there a way I can develop my project in the Windows File system but still have hot reloading? I tend to use different distros and explore with different configurations and store my code on windows system.

alexh56 profile image
Alex Hamilton

This solved my problem with Next, and several others as a result; may blessings follow you everywhere you go.

icecoffee profile image
Atulit Anand • Edited

This solution is not working.
Just switched from wsl to wsl2 but so shady bugs popped up and not HMR is still not working.

orama254 profile image

Just checked it out yesterday, it's still working

mickaelmangaud profile image

I have no pb when i create next projects in the /home/user directory

arminops profile image
Armin Tor

I just don't know how to connect vs code for folder changes?

tolog profile image
Thomas Lodge

My HMR wasn't working because I cad the incorrect casing on one of my imports 😅