VS code에서 React.js 개발서버 시작시 Error: ENOSPC 에러

문제상황

OS는 하모니카를 사용중이며, 오래된 노트북으로 작업한다. (2012년도 삼성 노트북)

React.js를 이용하여 프론트엔드 개발 공부를 하고 있고, 에디터는 VS code를 사용하고 있다.

npx Create-react-app을 이용하여 초기 프로젝트를 세팅하였고, package.json에 기본적으로 "npm start"라는 개발서버 실행 스크립트가 포함되어있다.

 

Starting the development server...

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/wonjinyi/Desktop/LearnReact/movie/public'
    at FSWatcher.start (internal/fs/watchers.js:169:26)
    at Object.watch (fs.js:1422:11)
    at createFsWatchInstance (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher.<anonymous> (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqCallback.oncomplete (fs.js:169:5)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:40:5)
    at setFsWatchListener (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    [... lines matching original stack trace ...]
    at FSReqCallback.oncomplete (fs.js:169:5) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/wonjinyi/Desktop/LearnReact/movie/public',
  filename: '/home/wonjinyi/Desktop/LearnReact/movie/public'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the movie@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/wonjinyi/.npm/_logs/2020-10-03T02_36_24_937Z-debug.log
(base) wonjinyi@wonjinYi:~/Desktop/LearnReact/movie$ 

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/wonjinyi/Desktop/LearnReact/movie/public'

정상적으로 모든 코드를 작성한 뒤 "npm start"로 개발서버를 실행하고자 하였으나, 위와 같은 오류가 발생하며 실행되지않는다.

 

위와 같은 현상이 언제 나타나는지는 아직도 확신이 없다. 진짜 아무때나 나타나기 때문이다. 겪어보면 정말 어이가없다.

어제 : 개발서버 잘 굴리다가 잠시 서버 종료. 필요없는 파일 하나 삭제하고나서 개발서버 재구동 -> 에러발생

-----> 작업하던 프로젝트 싹 다 지워버리고, CRA로 아예 새로운 프로젝트를 생성.

->  에러발생했을 당시와 똑같이 모든 파일작업함

-> 정상구동 확인 후 컴퓨터 종료

오늘 : 컴퓨터 켠 다음 아무런 작업을 하지 않고, 개발서버 실행 -> 에러발생

 

해결의 실마리

깃헙 개츠비 레포의 질의응답글을 통해 VS Code 공식문서를 찾았다. 똑같은지는 모르겠지만 관련있어 보이는 내용을 찾을 수 있었다. 그 내용을 정리해둔다. VS code는 파일변화 체크를 무턱대고 전부 다 하지 않는다. 어느정도까지 체크해줄지 프로젝트 규모의 한계를 둔다.

When you see this notification, it indicates that the VS Code file watcher is running out of handles because the workspace is large and contains many files.

너무크면 VS code가 보다가 파업을 해버린다는거다. 이 괘씸한 콤-퓨타에게 더 많은 일을 시킬 수 있는 방법이 필요하다.

 

해결하기

(base) wonjinyi@wonjinYi:~$ cat /proc/sys/fs/inotify/max_user_watches
8192
(base) wonjinyi@wonjinYi:~$

위 명령어를 쉘에 치면, 현재 어느정도의 규모까지 vs code file watcher가 파일변화를 체크할 수 있는지 알 수 있다. 본인은 8192라는 값이 나왔다.

 

The limit can be increased to its maximum by editing /etc/sysctl.conf and adding this line to the end of the file: fs.inotify.max_user_watches=524288 The new value can then be loaded in by running sudo sysctl -p.

위와 같은 방법으로 file watcher가 감당할 수 있는 한계를 늘일 수 있다고 한다. 하나하나 따라가보자

 

(base) wonjinyi@wonjinYi:/$ sudo vi /etc/sysctl.conf

먼저 쉘에서 /etc/sysctl.conf파일을 vim으로 실행하자. vim조작이 어렵다면 생활코딩 강의를 참고하면 된다.

 

fs.inotify.max_user_watches=524288

파일이 열렸다면, 원하는 곳 아무데나 위 내용을 추가해준다.

추가했다면, [esc] - [ :wq! ] - [ ENTER ] 를 눌러 '저장하고 닫기'를 하자.

 

(base) wonjinyi@wonjinYi:/$ sudo sysctl -p
fs.inotify.max_user_watches = 524288

마지막으로, 위 명령어를 입력하여 변경내용을 시스템에 반영한다. 어떤내용이 반영되었는지 출력될 것이다. 같은내용이 나오면 성공한 것이다.

 

Compiled successfully!

You can now view movie in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.30.1.51:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

원래 작업하던 프로젝트로 돌아가 "npm start"로 개발서버를 구동해보았다. 정상적으로 잘 되는 것을 볼 수 있다.

 

남아있는 문제아닌 문제

file watcher limit값을 더 높이게 되면 그만큼 서버실행에 걸리는 시간이 길어진다. 당연한 이야기이다.

8,000대에서 500,000으로 올렸는데, 당연하게도 상당한 체감이 되었다. 하지만 에러 신경쓰면서 하는 것보단 마음이 편하다.

속도가 중요하다면 다른 방법을 더 찾아보아야 할 것이다.