React.js - npm start をした後に、ファイルを編集したらエラーが出現

Question

前提・実現したいこと

初投稿です。現在、React の環境構築で悩んでいるのですが、React のバージョンが
古かったので最新のバージョンにあげた所謎のエラーが表れて苦しんでいます。

npm start をしてローカルサーバーを立ち上げた時に、自分の React プロジェクトのディレクトリにある、xxxx.html, xxxx.css, xxxx.js いずれかのファイルを編集し保存した時に以下のエラーメッセージが発生します。

行いたい事は下記のエラーを取り除く事です。

発生している問題・エラーメッセージ

必要ともしていない、.#ファイル名がないと言われます。このファイル（.#ファイル名）がないと、React 側でエラーが起きます。

一応、エラーで言われているファイルを作成するとエラーも消えますが根本的な解決ではないので、何とか解決を行いたいです。

/home/taisei/tmp/test/react-test/node_modules/react-scripts/scripts/start.js:19                                 
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/taisei/tmp/test/react-test/src/.#App.js'] {              
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/taisei/tmp/test/react-test/src/.#App.js'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-test@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-test@0.1.0 start 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!     /home/taisei/.npm/_logs/2021-01-10T12_11_35_038Z-debug.log

試したこと

一応、node_module と package-lock.json を削除してから、npm install なども行いましたが上手くいかなかったです。

補足情報（FW/ツールのバージョンなど）

node のバージョン：v14.15.1

package.json の内容

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Comments

[hoshi-takanori]

emacs をお使いなら、ロックファイルなどを作らない設定にしてみては。
http://yohshiy.blog.fc2.com/blog-entry-319.html

[taiseiyo]

今回のエラーはそうではなくて、ロックファイルがないとエラーがでてきてしまいます

[taiseiyo]

なのでロックファイルを作らない設定にしたらエラーを解決する事ができません

Answer 1

https://github.com/facebook/create-react-app/issues/9056

node_modules/react-scripts/config/webpackDevServer.config.js
ここを編集するといけるみたいです！！

before

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

after

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

Comments

[taiseiyo]

もっと良い方法あれば是非お願いします！！

[退会済みユーザー]

まずは問題が解決したのかを書くべきでしょう。
それに「もっと良い」とは何を期待しているのですか。

[taiseiyo]

解決はしております。
上記のコメントをよく読んで下さい。

解決した方法の部分に内容を書いているのだから、解決はしていると考えられるまた。そしてxxxをする事でいけたと書いているので問題は解決したと読み取る事ができるはずです。

また、もっと良いとは今回の場合は、設定ファイルをプロジェクト毎に触らなければいけないので、そうではなくプロジェクト開始時に未然に防げるような解決法はないのか？などもっとお手軽に問題解決ができないのか？などの情報を幅広く聞きたいためにあえて広い範囲で聞いています。