Amplify + React/Redux アプリ開発 ~ Emacs 使ってると Dev Server 落ちる問題について ~

October 12, 2020

今回やること

多くの方は React アプリを書くのに Emacs を使ってはいないでしょうが、私は使っています。
そして、Emacs を使っていると npm start して development server を立ち上げた後にファイルを編集すると以下のエラーで development server が落ちます。

/home/ec2-user/Development/ReactApp/AmplifySampleApp/node_modules/react-scripts/scripts/start.js:19  
  throw err;  
  ^  
  
[Error: ENOENT: no such file or directory, stat '/home/ec2-user/Development/ReactApp/AmplifySampleApp/src/.#App.js'] {  
  errno: -2,  
  code: 'ENOENT',  
  syscall: 'stat',  
  path: '/home/ec2-user/Development/ReactApp/AmplifySampleApp/src/.#App.js'  
}  
npm ERR! code ELIFECYCLE  
npm ERR! errno 1  
npm ERR! sample-app@0.1.0 start: `react-scripts start`  
npm ERR! Exit status 1  
npm ERR!   
npm ERR! Failed at the sample-app@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/ec2-user/.npm/_logs/2020-10-11T20_19_06_410Z-debug.log

編集するたびに npm start 打ってビルドやり直しになるので本当に時間の無駄です。今回はこれを解消したいと思います。

原因について

まず本事象の原因ですが、ここにも書いてある通り、Emacs はファイルを編集中に、ファイルロックを作成し、そのファイルロックが .#filename という存在しないファイルへのシンボリックリンクとなっています。
Development server が .#filename という名前のファイルを検知し、元のファイルが編集される度にビルドを試みますが、ファイルは実際には存在しないのでこけるのが原因です。
どうやら GitHub issue によると babel.config.json / tsconfig.json を編集しても効果が無いらしく、現時点 (2020/10/11) でもまだ解消されていないようです。

ワークアラウンド

node_modules/react-scripts/scripts/start.js の以下

process.on('unhandledRejection', err => {  
  throw err;   
});

の部分を、

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

に変えてあげれば OK です。ファイルロック用のファイルを正規表現で弾いてるだけですね。
実際にこれで Development server はこけなくなりました。

ただやはり根本対処がなされるのが望ましいですね…。Emacs は使うなということか…。