Can't get webpack hot loader to work with React

Question

I have been trying to get a working version of webpack's hot loader to do live editing for developing an app. After following tutorials and not being able to get live editing working, I decided to start from scratch.

I cloned a clean repo of a React Hot Loader boilerplate and tried using Dan Abramov's create-react-app. I am able to build both apps. I am getting a log in the console that says [WDS] Hot Module Replacement enabled but editing any files does not trigger a page reload or anything in terminal. In this troubleshooting page, I fall under this category:

I see “[WDS] Hot Module Replacement enabled” but nothing happens when I edit App.js

If you're running Node 0.11.13, you might want to try updating to 0.12. Some people reported this helped solve this problem. Also make sure that your requires have the same filename casing as the files. Having App.js and doingrequire('app') might trip the watcher on some systems.

OS X also has a rarely-occuring bug that causes some folders to get 'broken' with regards to file system change monitoring. Here are some suggested fixes.

I looked at this part of the troubleshooting guide but nothing seemed to work.

I am running npm v2.15.1 and node v4.2.6 in Ubuntu 16.04.

nima nima · Accepted Answer · 2016-08-01T14:07:38

The problem was with the watchers on Ubuntu. On Ubuntu, I tried checking the dmsesg logs and it told me inotify resources have been exhausted and it cannot be used.

$ tail -f /var/log/dmesg 
(Nothing has been logged yet.)
tail: inotify resources exhausted
tail: inotify cannot be used, reverting to polling

From the troubleshoot page of react-hot-loader:

Ubuntu users (and possibly others): echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

Then hot loader worked as expected.

Can't get webpack hot loader to work with React

1 Answers