I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.
I'm writing a React project in VS code. I met this problem in VS code. In my project, this folder shows Contains emphasized items and I know it means there is an error in my files. But in the picture:
,
I have checked all files but no error was found. So this makes me feel confused.
I have searched this problem on google and found a similar GitHub issue. https://github.com/Microsoft/vscode/issues/54960
Use the command, CTRL+SHIFT+P on windows or COMMAND+SHIFT+P on mac, then search "Developer: reload window", click on it, your vs will reload and enjoy your stress-free coding.
Committing once with git can be resolved.
I can solve the problem react-native start --reset-cache and by reloading VS with the command Ctrl + shift + p and searching Developer: Reload Window
Just to know I was in an Angular project, using Windows, WSL, I created a service and after that I renamed it, when I committed the changes, I noticed this red mark.
I just pressed
Ctrl + Shift + P and then typed: Developer: Reload Window. It will just reload the entire project and the mark will disappear.
I saw this message after moving a file from one folder to another, renaming and committing everything to git.
The Visual Studio "Problems" window showed an issue with the "deleted" file. Somehow VS had left a window open for the original location of the file and in it's tab the file was labeled as "deleted". Closing that tab in VS got rid of the "Contains emphasized items"
This error is coming because sometimes we delete something so its need window reloading and to reload Type the command, CTRL+SHIFT+P on windows or COMMAND+SHIFT+P on mac, then search "Developer: reload window", click on it. It will reload the window and your error will be gone
This happens when you've deleted some files/folders from project and haven't yet added the event to a commit.
There is multiple solutions
Option 1: Close the VS code and open it again
Option 2: Commit your code chages in git(if you are using)
Option 3: Reload the VS code - Use the command, CTRL+SHIFT+P on windows or COMMAND+SHIFT+P on mac, then search "Developer: reload window", click on it
Had the same issue.
Committing multiple times from within the VS Code did not help.
However, once I added the files and committed from the shell, everything fell in place.
I noticed this when I working on a Rails application using Visual Studio Code editor.
I used an underscore for a directory name, that is instead of staticpages, I named the directory static_pages.
However, committing the code change using the below commands fixed it:
git add .
git commit -m "commit message"
That's all.
I hope this helps
In my case, the already deleted files were opened in the VS code. Closing those files resolved my issue.
This is an edge case but I am putting it here just in case it helps someone in the future...
I had accidentally done a git add . before I had fully set up my .gitignore file, so it had staged a couple folders with hundreds of files (mostly the entire Electron out folder) that I definitely didn't want in the repo.
This is the procedure I went thru to clean up my staged files:
updated .gitignore so that when I reverted the add I could be sure that GIT was ignoring the right files and folders (which worked, hundreds to 7, the moment I did the git reset)
git reset -f
noting that the correct files were now in line to be staged, I did:
git add .
git commit -m "message"
git push
When I returned to the regular file list, I noticed that node_modules was showing the "emphasized items" indicator. So just to make sure that I had actually gotten everything committed and such I tweaked .gitignore again (added node_modules/** just in case lol), did another commit, and still had the issue. Nothing helped, and like I said, it was confusing because the indicated files were under node_modules and it was in the ignore list.
So I hit cmd-p and ran Developer: Reload Window. It turned out out all I had to do was reload the window and the emphasized items went away entirely. Simple fix, confusing problem.
Apparently adding, reverting, then adding a subset of my directories confused vs code and it just needed to reload the window.
I had the same issue, pushing to git didn't solve the problem. I simply closed all files, cancelled my dev server and restarted VS Code. The emphasizing was gone.
this work for me :
I can solve the problem react-native start --reset-cache and by reloading VS with the command Ctrl + shift + p and searching Developer: Reload Window
In my case files that had been deleted were still opened in VsCode. After closing them (and also git commit as other posts suggest) helped solved the problem
git add .
git commit -m "your commit description"
If this not helps, after commit restart the VS CODE
Select this tab from toolbar - View -> Problems or Ctrl + Shift + M and on bottom Terminal you will see whats problem is it.
0
When I was working on a angular application in the Visual Studio Code editor, I observed this. And resolved it by simply restarting VSCode.
This error occurs because there are pending changes to be saved in git, so to solve this problem, open a command terminal and go to the folder where your project is located, execute the following commands
git add .
git commit -m "your commit description"
In my case it works with this.
VSCode using React. Changed a folder name in the src folder. Would not pass compilation after changing names of components. Committed to git. Restarted the app with npm start. All is well.
You may have hidden files. My Explorer was not listing hidden files in those directories. Hidden files on Linux begin with a . (for example, .hidden.txt)
Had the same issue, had copied files from a folder into another folder. git commit as suggested solved the issue.
commit the changes, if still, the error is there, reopen the vscode
I don't think so we need to involve git for this issue.
Just restart the vs-code and things will work like a rocket🚀
uninstall any extension if you have installed in vs code.It will be solved.
I'm not sure what happened here but I was always able to publish to my local pc for my ExtJs project. Now all of a sudden I am getting this error..
Error Copying file Sencha.sencha\app\app.defaults.json to obj\Release\Package\PackageTmp\Sencha.sencha\app\app.defaults.json failed. Could not find a part of the path 'Sencha.sencha\app\app.defaults.json'. ExtApplication4 0
I think I did upgrade version of ExtJs a while back but not sure this is what caused it.
I also notice the files don't exist when I look at solution explorer.
Any ideas? This is pretty vital to my whole situation.
Did you upgrade Sencha Cmd to 6.5x? This new version does not create the .sencha hidden folder anymore. You error seems to be related to this.
My code runs a previous version of itself, so even though i completely remove all the code, it still runs the old one. I've read a few other posts regarding this problem, and tried it out. My temporary solution is to build the project before running it, but that is kinda stupid. the .exe file is in the Release folder, and my Debug folder dissapeared after the Clean.
How do I stop needing to build the project before everytime I need to run it?
I found out there's a button called auto build in the Launch Configuration properties window. So it build everytime I run it.
When I use the "Start without Debugging" button in Visual Studio, my app is copied to a debug directory and runs from there, which I discovered via Environment.CurrentDirectory.
However, there is a text file in the root of the project that I also need to copy, regardless of the build options. When I press "Start without Debugging", this file is never copied, despite the properties set:
Can anyone please provide instructions on what options to include this file when starting without debugging?
Oddly enough, I don't have the "AdditionalFiles" listed in my WinForms app Build Action, also tried with VS2015. Though setting the Build Action to "Content" works for me, when doing the CTRL-F5.