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.
Top comments (7)
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.
This solved my problem with Next, and several others as a result; may blessings follow you everywhere you go.
This solution is not working.
Just switched from wsl to wsl2 but so shady bugs popped up and not HMR is still not working.
Just checked it out yesterday, it's still working
I have no pb when i create next projects in the /home/user directory
I just don't know how to connect vs code for folder changes?
My HMR wasn't working because I cad the incorrect casing on one of my imports 😅