ReactJS local server crashes after editing file in Emacs even without saving

It looks like the emacs lockfile is causing a bug in how watchpack (a part of webpack) uses chokidar (a filesystem monitor).

The answer from viam0Zah with comment from Rorschach are good for stopping emacs from writing the lock file.

Instead, I went looking for why the lockfile is crashing webpack, and found the general area, but couldn't quite understand it.

I did come up with a total hack temporary fix: edit your node_modules/watchpack/lib/DirectoryWatcher.js file. On line 57 change from followSymlinks: false to followSymlinks: true.

Any edits to node_modules like this will, of course, be lost the next time you update versions or otherwise reload your node modules.

I think the actual problem relates to this issue, which I don't have the willpower to wade through right now: https://github.com/webpack/watchpack/issues/130

Comment out line 19 of node_modules/react-scripts/scripts/start.js as a work around until it is fixed. That's better than disabling lockfiles and possibly losing edits.

Emacs uses lockfiles to avoid editing collisions. .#index.js is a lock file automatically created by Emacs in your case because index.js is edited but not yet saved. If it's your local computer, it's unlikely that collision will happen, so it's safe to disable this feature by

(setq create-lockfiles nil)

As Rorschach mentioned in a comment, if you want to disable lockfiles for this specific project only, the best way is to set it as a directory variable:

;; /home/myname/Code/project/reactapp/.dir-locals.el
((nil . ((create-lockfiles . nil))))