When I save my React files, the browser does not update the displayed content. Reloading the page also does not work. In order to see my changes I have to exit and run npm start again.
I use:
- wsl
- vscode
- Chrome
I've tried several solutions and I'm not able to remember them all. I have tried everything on Reacts homepage, several solutions provided here on stackoverflow and I even tried getting help through chatGPT. I'll list some of my attempts below.
1. Creating a new project
2. Reinstalling dependencies
3. Running these commands: npm install, npm update, npm outdated, ls -l and ls -a, npm install react react-dom and several other commands in multiple projects. My project setup is unlikely to be the issue, as I tried creating a fresh project and only changing the h1 in the index file, to see if it changed on save.
4. Creating .env file with this content: FAST_REFRESH=false. I also tried this: CHOKIDAR_USEPOLLING=true
5. Disabling all browser extensions
6. I tried using Firefox instead of Chrome by following these steps:
- npm install cross-env --save-dev
- Changing start script to "start": "cross-env BROWSER=firefox react-scripts start" (also tried without cross-env)
- npx react-scripts start --browser firefox this did not work for me.
I am learning React and don't know it's ins and outs yet. I'm lost on how to further troubleshoot this.
I have a small suspicion that these issues are caused by Xvfb dependencies I had to install in a prior course involving Cypress. I never got Cypress to work on my system. The problem is I do not know how to locate these dependencies to delete them. I consider deleting and reinstalling wsl at this point, but hope I do not need to go through that process again, as I've installed a lot since then. If anyone is able to provide a different solution to this I'm happy to try anything at this point. I don't know if that means locating and deleting Xvfb dependencies or if the solution involves React. Restaring my dev server is starting to get annoying.
