TIL

191120_TIL(npm 에러와 .npmrc)

node

npm TypeError: Cannot read property ‘loaded’ of undefined와 .npmrc 파일

오늘도 기분좋게(?) 코딩을 하기 위해 create react-app 명령어를 입력하였는데 몇분이 지나도 어떠한 것도 실행되지 않았다. 아무 행동도 하지 않고 컴퓨터를 키자마자 입력한 명령어인데…

당최 원인을 알 수 없어서 구글 신을 이용하려했지만 구글 신에게 물어본 적절한 질문조차 떠오르지 않았다. 그렇게 약 1시간을 허비하고도 해결을 하지 못한채 깊은 고민에 빠졌다.

그러다 문득 다른 명령어들은 잘 되나 불안한 마음에 테스트를 해보았다. 일단 yarn 명령어는 정상 작동하였다. 그런데 기이한것은 create react-app을 yarn으로 실행한다는 것이다. create react-app은 왜 안되는 것일까…? (이 부분은 yarn 과 npm에 대해 공부를 해봐야겠다.) 떨리는 마음으로 npm 명령어를 입력해보았다. create react-app과 같이 아무것도 실행되지 않았다. 에러 메세지라도 띄워 줬으면 했지만…

npm 명령어가 작동하지 않는 것이 원인이라고 생각되어서 node 버전과 npm 버전을 업데이트 한다는 기쁜 마음(?)으로 node를 지웠다가 새로 설치하였다.

떨리는 마음으로 npm 명령어를 입력하고나니 다행히도 에러가 발생하였다.(?)

발생한 에러는 다음과 같다.

1
// npm TypeError: Cannot read property 'loaded' of undefined

드디어 구글 신에게 도움을 요청할 수 있는 질문이 생겼다. 구글링을 해보니 나와 같은 에러가 발생한 사람이 이미 있어서 stackoverflow에 관련 글이 있었다.

stack overflow

해결 방법은 간단하였다. 사용자 계정 디렉토리에 있는 .npmrc 파일을 삭제하면 끝이다.

실제로 삭제를 하고 npm 명령어 와 create react-app 모두 정상적으로 실행되었다. 이쯤되니 궁금해졌다. .npmrc 파일의 정체는 무엇일까??

npm 공식문서에서 .npmrc에 대한 정의는 이렇다. The npm config files 번역하면 npm 구성파일 이라는 것인데 이것만으로는 .npmrc가 어떤 역할을 하는지 와닿지 않는다.

조금 더 읽어보면 이런 글이 있다. npm은 커맨드라인, 환경 변수 및 npmrc 파일에서 구성 설정을 가져옵니다. 이제 조금 알것도 같다. npmrc는 npm 구성을 설정하는 파일인것이다.

그런데 npmrc 파일이 하나가 있는것이 아니었다. 아래와 같이 관련 파일이 총 4가지나 있다.

  • per-project config file (/path/to/my/project/.npmrc)
  • per-user config file (~/.npmrc)
  • global config file ($PREFIX/etc/npmrc)
  • npm builtin config file (/path/to/npm/npmrc)

위에서 삭제했던 파일은 경로를 생각해보면 per-user config file인듯하다. 내용을 살펴보면 아래와 같다.

1
2
// .npmrc
prefix=C:Users<username

다른 경로에 있는 npmrc 파일에 내용이다. 경로를 보았을 때 global config file인듯 하다.

1
2
// npmrc
prefix=${APPDATA}\npm

그런데 prefix는 무엇일까?

알아보니 prefix는 전역 항목이 설치된 위치이며 기본적으로 npm 자체의 설치 위치라고 한다.

그렇다면 왜 에러가 발생했던 것이고 per-user config file을 삭제하면 왜 에러가 고쳐졌던 것일까?

npm 구성을 설정하는 방법은 다양하고 우선순위가 있다. per-user config file이 global config file보다 우선순위가 높다. 따라서 per-user config file의 설정이 npm에 적용되었을 것이다. 그런데 per-user config file에 설정된 prefix=C:Users<username는 누가 봐도 이상하다. 알 수 없는 경로가 설정되어 있다. 이 파일이 왜 생성되었는지는 미스테리이다. (아무래도 npm install 과정에서 무언가 꼬인것 같다.) 그래서 per-user config file을 삭제하면 아래 npmrc 파일의 올바른 설정이 적용되어서 npm이 정상 작동하는 것이다.

올바른 경로에 npm 폴더는 전역으로 설치된 모듈들이 들어있다.

참고

.npmrc란 무엇인가

npmrc docs

npm cofig

Share