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

Question

I'm trying to follow the ReactJS tutorial at https://reactjs.org/tutorial/tutorial.html. I'm using Emacs to edit index.js, and when I edit the file (add a newline, let`s say), even without saving the file, instantly the server crashes and I get this output:

/home/myname/Code/project/reactapp/node_modules/react-scripts/scripts/start.
js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/myname/Code/project/r
eactapp/src/.#index.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/myname/Code/project/reactapp/src/.#index.js'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/myname/.npm/_logs/2020-06-25T03_16_55_466Z-debug.log

I've checked for the file .#index.js and it's a hidden file that looks like this

lrwxrwxrwx 1 myname myname   32 Jun 25 13:16  .#index.js -> [email protected]:1593054984

When I try to open it it tells me that it's a symbolic link to a file that doesn't exist.

I've tried restarting my machine, creating a new ReactJS project, and I'm really not sure what's going on. I've never used npm/nodejs/reactjs before. Any help would be much appreciated.

Answer 1

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)))) 

Answer 2

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

Answer 3

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.