I’m using WSL on Windows for almost all my programming projects. The other day, I wanted to work on a React project again I hadn’t spent time on for a while.

I had created the project with create-react-app initially. I checked out the source code, ran npm install, npm start and started to write code.

To my surprise, whenever I made changes to a file, the changes weren’t reflected in the browser. Somehow Webpack didn’t recognize the file changes.

After some research I found out, that I needed to apply a few more settings to make it work again.

Polling

Step 1 was to switch Webpack’s change watcher into polling mode. For that, create a .env file in the project root and add:

CHOCKIDAR_USE_POLLING=true

That already helped a bit, yet still it took a long time from making a change to seeing the results.

Allow more Watchers

What also helped is to increase the number of maximum watchers on the system.

Run the following snippet:

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Source: Webpack