create-react-app: Development server errors due to emacs file lock

This started today for me too. I can’t see what changed in my environment.

A temporary workaround, until this is resolved, is to tell your Emacs to stop saving lock files:

Try:

M-X Eval Expression
(setq create-lockfiles nil)

This has consequences, but will at least let us work for now with Emacs and React until someone figures out what’s really going on.

setting watchOptions.ignored worked for me:

    watchOptions: {
      ignored: /\.#|node_modules|~$/,
    },

this will ignore emacs lock files, emacs backup files, and node_modules (which you may or may not want).

See also: https://stackoverflow.com/a/62571200

You can disable lockfiles locally:

;; .dir-locals.el in the project root
((nil . ((create-lockfiles . nil)))) 

Edit: sorry. I didn’t realised that there is already a workaround. but I found that it is not harm to leave as it is.

I’m starting learning the react and found this annoying bug if you don’t mind the change the file in node_modules, you can edited node_modules/react-scripts/config/webpackDevServer.config.js where

    watchOptions: {
      ignored: ignoredFiles(paths.appSrc), 
    },

to

'    watchOptions: {
      ignored: [ignoredFiles(paths.appSrc), '**/.#*', '**/*~', '**/#*#'],
    },

I found some changelog in node_modules/chokidar/README.md

- **v3.1 (Sep 16, 2019):** dotfiles are no longer filtered out by default. Use `ignored` option if needed. Improve initial Linux scan time by 50%.

works fine for me now.

Hi,

I just pushed another fix to https://github.com/facebook/create-react-app/pull/10706 . The merge request should be accepted if the GitHub Workflows succeeds.

I just tested this by applying the patch to node_modules/react-dev-utils/ignoredFiles.js. I advise this workaround until the patch is deployed and we can all go back to using stock emacs without hot-patching our kernels.

@ZelphirKaltstahl All we need is this PR to be accepted: https://github.com/facebook/create-react-app/pull/10706 It will also fix mg editor’s lockfiles and a whole bunch of other editors that use similar names for backup files as well.

Is there any general fix for this, that does not require:

• extra dependencies
• old versions of dependencies
• ejecting
• changing how Emacs works

? The issue is open for already almost a year. If I understand correctly, the issue lies within some kind of “watcher”, be it brocoli or craco or whatever. Shouldn’t a watcher be configurable, instead of blindly tracking every single file in the directory?

At least when using create-react-app, you can install craco and use the following to set the ignore without having to eject or edit anything in node-modules:

  // craco.config.js
  module.exports = {
    devServer: {
        watchOptions: {
            ignored: /\.#|node_modules|~$/,
        },
    },
}

I have run into this same issue. I’m a little surprised that it seems so hard to fix. While the work around solutions are OK for immediate fix, they are a poor solution. Editing files in node_moduels/react-scripts/config is a hack.

Strikes me the problem here is hiding configuration settings from the end user by burying them inside the package and not providing a way for the user to override/set them themselves. Some values can be over ridden with a .env file .e.g BROWSER, REACT_EDITOR, FAST_REFRESH, but others, like watchOptions cannot.

What would be good is the ability to have support for a webpack.json and webpackDevServer.json files which the user could place in the root of their project and which would be read in and merged into the configuration objects returned, allowing easy override of defaults by end user. At least then, when we do an npm update and the react-scripts package is updated, we won’t lose our settings and we can easily commit our preferences etc.

I am facing this too.

I do not wish to edit webpackDevserver.config.js on every project, nor do I wish to edit anything in node_modules, which is clearly meant to be ephemeral, deletable, reproducable, and isn’t added to my git repo

What I do want to do is edit using emacs, without having to break emacs by removing its locking files.

I can confirm that @misapprehand’s suggestion to change watchpack to version 1.6.0 seems to fix this issue…

I wonder if this watchpack issue is related: https://github.com/webpack/watchpack/issues/165

Another way to reproduce the issue: $ yarn create react-app my-app $ cd my-app $ yarn start ` Edit index.js using emacs. No issue. Then

$ rm  yarn.lock
$ rm -rf node_modules
$ yarn
$ yarn start

Eidt index.js again. The server is broken by emacs lock file

After comparing two yarn.lock files. The different version of watchpack causes the issue no issue:

watchpack@^1.6.0:
version "1.6.0"

issue:

watchpack@^1.6.0:
version "1.7.4"

If change issue yarn.lock to

watchpack@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
  integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
  dependencies:
    chokidar "^2.0.2"
    graceful-fs "^4.1.2"
    neo-async "^2.5.0"

server will not be broken by emacs file lock

I also find yarn create react-app my-app and

rm yarn.lock
yarn

get different react-script under node_modules, Especially the path of babel related package.

I couldn’t get this to work too and didn’t want to use the exact solution to disable symlinks: https://github.com/facebook/create-react-app/issues/9056#issuecomment-633540572. Spacemacs docs have this in their README https://develop.spacemacs.org/layers/LAYERS.html#emberjs:

Additionally, temporary backup, autosave, and lockfiles interfere with broccoli watcher, so they need to either be moved out of the way or disabled. 
(setq backup-directory-alist `((".*" . ,temporary-file-directory)))
(setq auto-save-file-name-transforms `((".*" ,temporary-file-directory t)))
(setq create-lockfiles nil)

It’s still bad but at least it’s something more. I think it’s an issue with watchpack but I didn’t dig into sources.

You could try patching it as part of the set up process. It’s not ideal but it’s just a one and done thing for each project. Edit: then you wouldn’t need to eject and it can be scripted into the set up workflow. Ejecting seems like overkill for this.

patching is what I ended up doing on my one c-r-a project, yeah; I added a postinstall script which mangles the webpack config file to add this fix. it’s dirty but it’ll work and you don’t have to eject.

just a temporay workaround. Try:

Change the file /node_modules/react-scripts/scripts/start.js

.....
process.on('unhandledRejection', err => {
    const re = /ENOENT: no such file or directory, stat .*\.#.*\.ts/i;
    if (!err.message.match(re)) {
        throw err; 
    }
});
....