Development server errors due to emacs file lock

[spenceforce]

Describe the bug

When running the development server using npm start, it throws an error and exits whenever a src file is edited in emacs. Emacs creates a file lock in the same directory as the file being edited. The file lock is a symlink to a non-existant file that has the same name as the file being edited, except it is preprended with .#. The server sees this file, tries to compile it and throws an error because the file doesn't actually exist.

In babel.config.json I have

{
  "ignore": [ "**/.#*"]
}

and in tsconfig.json I have

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": ["**/.#*"]
}

which is the default generated by create-react-app with the exception of the exclude option. Both the ignore and exclude options have no affect.

Did you try recovering your dependencies?

I still see the issue.

$ npm --version
6.14.5

Which terms did you search for in User Guide?

I searched the docs and issues for problems created by lock files and how to exclude files from building. I also searched the docs for typescript and babel.

Environment

$ npx create-react-app --info
npx: installed 98 in 6.797s

Environment Info:

  current version of create-react-app: 3.4.1
  running from /path/to/.npm/_npx/20905/lib/node_modules/create-react-app

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 68.8.0esr
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create a a typescript project with create-react-app.
2. Start the dev server with npm start.
3. Edit a ts/tsx file

Expected behavior

I expect the tool to either ignore the lock files because they aren't being imported by anything or to honor the rules in tsconfig.json or babel.config.json. Before migrating to create-react-app I was using just webpack and typescript for development/bundling and there were no issues with emacs lock files.

Actual behavior

The dev server starts properly and compiles the project fine, but once a source file is edited it throws an error and exits.

> project@0.1.0 front-end /path/to/project
> react-scripts start

ℹ ｢wds｣: Project is running at http://192.168.0.19/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /path/to/project/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Files successfully emitted, waiting for typecheck results...
Compiled with warnings.

...

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

/path/to/project/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: ENOENT: no such file or directory, stat '/path/to/project/src/components/.#view.ts'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.1.0 front-end: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the project@0.1.0 front-end script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/debug.log

Reproducible demo

[deg-basis]

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.

[braineo]

same here, I tried to extend devServer/watchOptions/ignored using customize-cra to ignore lock files but does not work

[misapprehand]

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; 
    }
});
....

[seth4618]

Any progress on this? Does anyone know where the webpack config file is so that an exclude can be included?

BTW: temporary workaround suggested in above should test for [jt]s at end so editting of regular js files also works. And, also handle lstat error e.g,

      const re = /ENOENT: no such file or directory, l?stat .*\.#.*\.[jt]s/i;

[spenceforce]

@seth4618 I believe it's at packages/react-scripts/config/webpack.config.js. When i was initially messing about trying to fix this, I made changes there, but it didn't work. I probably missed something though.

[seth4618]

@smitchell556 The fix suggested by @misapprehand with my mods is working for me.

[spenceforce]

The attempts I made were to exclude/ignore the files, not ignore the error. I'm glad that works though!

[orzechowskid]

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

[spenceforce]

@orzechowskid Is that in the webpack config under react-scripts or in your own config file?

[orzechowskid]

ah, sorry about that. this is node_modules/react-scripts/config/webpackDevServer.config.js, or just config/webpackDevServer.config.js if you've ejected your app.

[spenceforce]

Cool, that seems like a good way to fix this since it’s directly through webpack’s config. It looks like there’s been discussion (#6303) about allowing custom configuration which would be ideal for this, but there’s no current support for it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[braineo]

ah, sorry about that. this is node_modules/react-scripts/config/webpackDevServer.config.js, or just config/webpackDevServer.config.js if you've ejected your app.

So there is no good way getting around this without ejecting?

[spenceforce]

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.

[ignacio-gc]

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.

Also the lockfiles can be disabled per project https://stackoverflow.com/questions/62567370/reactjs-local-server-crashes-after-editing-file-in-emacs-even-without-saving

[orzechowskid]

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.

[Invertisment]

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.

[wu-lee]

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

You can disable lockfiles locally:

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

[misapprehand]

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.

[jerryasher]

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

[jeongoon]

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.

[zalox]

Relevant: https://github.com/preactjs/preact-cli/issues/1189

[theophilusx]

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.

[wschenk]

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|~$/,
        },
    },
}

[ZelphirKaltstahl]

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?

[Nikaoto]

@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.

[zalox]

@ZelphirKaltstahl All we need is this PR to be accepted: #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.

Thanks for reminding me of this open PR. I/Someone need to add tests for it to be accepted I suppose. I don't have time at the moment.

[ericprud]

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.

[scottjbarr]

This patch works well for me.

[zalox]

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.