Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development server errors due to emacs file lock #9056

Open
spenceforce opened this issue May 23, 2020 · 30 comments · May be fixed by #10706
Open

Development server errors due to emacs file lock #9056

spenceforce opened this issue May 23, 2020 · 30 comments · May be fixed by #10706

Comments

@spenceforce
Copy link

spenceforce commented May 23, 2020

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.

> [email protected] 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! [email protected] front-end: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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
Copy link

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
Copy link

braineo commented Jun 1, 2020

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

@misapprehand
Copy link

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
Copy link

seth4618 commented Jun 6, 2020

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
Copy link
Author

@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
Copy link

seth4618 commented Jun 6, 2020

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

@spenceforce
Copy link
Author

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

naruhito pushed a commit to naruhito/dot-emacs-dot-d that referenced this issue Jun 8, 2020
@orzechowskid
Copy link

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
Copy link
Author

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

@orzechowskid
Copy link

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
Copy link
Author

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
Copy link

stale bot commented Aug 8, 2020

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.

@stale stale bot added the stale label Aug 8, 2020
@braineo
Copy link

braineo commented Aug 12, 2020

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?

@stale stale bot removed the stale label Aug 12, 2020
@spenceforce
Copy link
Author

spenceforce commented Aug 12, 2020

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
Copy link

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
Copy link

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
Copy link

I couldn't get this to work too and didn't want to use the exact solution to disable symlinks: #9056 (comment).
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
Copy link

wu-lee commented Aug 29, 2020

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

You can disable lockfiles locally:

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

@misapprehand
Copy link

misapprehand commented Sep 26, 2020

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
Copy link

jerryasher commented Sep 29, 2020

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: webpack/watchpack#165

@jeongoon
Copy link

jeongoon commented Dec 14, 2020

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.

lfender6445 added a commit to lfender6445/next.js that referenced this issue Dec 26, 2020
@zalox
Copy link

zalox commented Mar 8, 2021

Relevant: preactjs/preact-cli#1189

@theophilusx
Copy link

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
Copy link

wschenk commented Mar 17, 2021

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

zalox added a commit to zalox/create-react-app that referenced this issue Mar 18, 2021
@ZelphirKaltstahl
Copy link

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
Copy link

Nikaoto commented Apr 7, 2021

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

@zalox
Copy link

zalox commented Apr 13, 2021

@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
Copy link

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
Copy link

This patch works well for me.

zalox added a commit to zalox/create-react-app that referenced this issue Jun 1, 2021
@zalox
Copy link

zalox commented Jun 1, 2021

Hi,

I just pushed another fix to #10706 . The merge request should be accepted if the GitHub Workflows succeeds.

squiter added a commit to squiter/react-tutorial that referenced this issue Sep 2, 2021
Those lock files breaks the auto refresh of the npm (or yarn, Idk
yet), this solution was suggested in this post facebook/create-react-app#9056
zalox added a commit to zalox/create-react-app that referenced this issue Jan 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.