13

I have my work computer which is a Windows 10 Pro and my laptop is a Windows 10 Home. Working on the same project on both: push and pull to Git. Learning React through Udemy. Both computers using Chrome. Both using Bash on Ubuntu on Windows with latest updates. Both using ConEmu for the console. Both npm -v = 3.10.10. Both node -v = 6.11.2. Hardware is different obviously, but not sure that is relevant and worth listing.

Anyway, this starter project I am playing around with, when I make changes to it and npm start is running, you can see activity in the console, hit refresh in the browser, and any changes made will be reflected.

On the laptop, this process does not work. Make change, save, no activity in console, refresh in browser does not reflect the changes. Have to restart npm start for changes to be reflected. A little irritating to say the least.

Anyway idea what might cause this? Really haven't come across anything in my Googling efforts.

cjones
  • 8,384
  • 17
  • 81
  • 175
  • Server-side changes or client side? In any case, any time I'm developing I turn off browser caching and use `nodemon` (google for it) – Jordan Kasper Aug 07 '17 at 19:36

5 Answers5

13

If you are using npm in WSL2.0 for development, please refer the last point in this- https://create-react-app.dev/docs/troubleshooting/#npm-start-doesnt-detect-changes

While WSL1.0 doesn't use a VM, WSL2.0 does use a lightweight VM, so adding

CHOKIDAR_USEPOLLING=true

in a .env file in the project directory fixed the problem.

On a sidenote, you might wanna take a look at this

Dawood Azeeza
  • 3
  • 3
tfist97
  • 131
  • 2
  • 4
  • 3
    Necro-posting but this worked like a charm- just to expand on this answer:- Run `npm i dotenv` in the project directory, make new file `.env` containing the above in the project directory, in the `rollup.config.js` file add: `require('dotenv').config()` – Lewis Farnworth Nov 26 '21 at 00:26
6

Client side

To ensure client side changes aren't being cached, you can open devtools > Network, and check "Disable cache". After enabling this, you won't have anything in the cache as long as devtools is open.

Alternatively, you can use incognito / private browsing mode to prevent the cache from holding on to things.

Server side

I'm sure you've realized that it's a pain to restart your server every time you want to see your code update. There are several tools that will detect file changes and handle restarting the server automatically.

posit labs
  • 8,951
  • 4
  • 36
  • 66
  • 1
    Seems like the issue is server side after reading your response. I check out those tools and they sound like what I need. But I'm still not understanding what is enabling the code to update while `npm start` is running on my work computer, but on my laptop I have to restart `npm start` every time to see a change when they both have pretty much the same dev environment. – cjones Aug 08 '17 at 02:33
  • disabling the cache worked for me – aurelia Nov 24 '21 at 17:03
0

I just add file .env and inside FAST_REFRESH=false.

Juan Rosales Vargas
  • 106
  • 1
  • 5
0

For me, working in Windows, WSL2 caused this not to work. Running npm start in Command Prompt, not WSL solved this issue for me.

apg
  • 41
  • 4
0

I have had the same problem, npm start started the project but it did not show the changes it was making. In my case the problem was with the WSL version, when installing it in Windows version 2 is installed by default, when changing to 1, everything works without any problem.

To check the version of wls use this command in the windows terminal (PowerShell), not in WLS:

wsl -l -v

To fix (when putting the first command, copy the version of Ubuntu installed to use the second command):

C:\>wsl --list --verbose

NAME            STATE           VERSION
Ubuntu-20.04    Running         1

C:\>wsl --set-version Ubuntu-20.04 1

I leave this info here in case it can help someone

Harsha Murupudi
  • 579
  • 1
  • 6
  • 19
Bea Figueroa Tielas
  • 1