react app doesn't update and .env file doesn't work

Question

I'm in WSL2, and my react app does not update any changes at all, only updates when re-running "npm start"

I've tried "npm install react-dotenv" and creating an .env file with FAST_REFRESH=false CHOKIDAR_USEPOLLING=true doesn't work

tried in the package.json "start": "CHOKIDAR_USEPOLLING=true react-scripts start" doesn't work

any suggestions? I don't even mind manually refreshing the browser, it's just that it won't update unless I restart the whole thing.

Answer 1

You do not have to install an additional dotenv package since Create-React-App already supports environment variables natively. However if you use environment variables, you need to prefix them with REACT_APP. e. g. REACT_APP_MY_VARIABLE.

Also note: Whenever you update an environment variable you have to restart the app.

Take a look at the official CRA docs.

Now for the reloading problem. There are a couple of possible solutions:

• Add a .env file to your project without third party package and define a variable named FAST_REFRESH=false. (CRA advanced configuration)

• If you are using a Virtual Machine try adding CHOKIDAR_USEPOLLING=true to your .env file.

• There is another common problem in CRA ^17.0.1 with hot reloading (Github issue - Hot Reload stopped working with React "^17.0.1")

  if (module.hot) module.hot.accept();
  

• Finally (and this is the most likely solution in my opinion) try to move your project folder to somewhere, where npm can automatically recompile in WSL. E. g. move project from your desktop to your actual home directory.