Development server errors due to emacs file lock

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.

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