Unable to resolve module ~~

가끔 뜨지만 자주 발생하는 에러보다 짜증나는 에러이다. 심지어 그 밑에 나온 1.2.~~ 방법은 윈도우 유저인 나한테는 따로 관련 패키지를 설치하지 않는 이상 시도도 되지 않았다.

구글링 해봤더니 역시 전세계에 나 말고도 이런 에러로 고통 받는 사람이 많았다.

우선 에러를 해결하기 전에 검토해봐야 하는 점이 있다.

1. 모듈 설치 확인

에러가 발생한 부분(모듈/라이브러리)가 설치되어 있는가?

보통 사람들이 외부 라이브러리를 사용하기 위해 npm install ~ 나 npm i ~와 같은 명령어를 이용해서 라이브러리를 다운받는다. 이게 혼자 사용하는 거고 내 컴퓨터에서만 돌거다 하면 큰 문제는 되지 않지만, 여러 사람이 협업을 하는 경우 문제가 된다.

react-native app 파일에는 package.json이라는 파일이 존재한다. 이 파일은 정말 중요한게 앱이 구동하기 위해 필요한 모든 라이브러리들의 목록과 버전을 관리해준다. 아래와 같이 dependencies에 라이브러리 목록들이 존재한다. react native 앱을 실행시킬 때 새로 설치하 패키지가 있다면 이 목록과 실제 내 로컬 폴더를 비교해서 모든 라이브러리들이 정상적으로 설치되어있는지 확인한다. 만약 설치되어있지 않다면 새로 설치해주는 것이 바로 npm install 명령어의 역할이다.

이게 무슨 말인지 아래의 그림을 통해 더 자세히 보도록 하겠다.

A와 B라는 사람이 github으로 협업을 하고 있다. 이때 A가 외부 라이브러리 ‘A’가 좋아보여 앱에 사용하기로 했고, 이 라이브러리를 npm install A라는 커맨드를 통해 로컬에 설치했다고 해보자.

그러면 A 로컬 환경에는 라이브러리가 잘 설치된다. 물론 코드 내에서 import ~ from A 구문도 잘 실행이 될 것이다. 이 상태로 신나서 github push, merge를 한다.

하지만 이 npm install A 명령어에서 주의해야 할 점은 package.json파일은 변하지 않았다는 점이다. 이러면 B가 pull을 해서 코드를 받고, 새로 추가된 모듈이 있으면 설치하기 위해 npm install 커맨드를 쳤을 때 package.json파일이 변하지 않았기 때문에 새로 설치된 모듈이 없다고 떠서 A 모듈이 설치가 되지 않고 앱을 실행시키면 에러가 뜨는 것이다. 참고로 npm install은 package.json과 설치된 모듈들을 비교해서 새로 설치된 모듈이 있으면 추가로 설치해주는 명령어이다.

그렇다면 이런 상황을 어떻게 피해야 할까? 이때 바로 --save 옵션을 활용하면 된다.

아까와 똑같은 상황에서 A가 모듈을 다운받을 때 npm install A 대신에 npm install --save A라고 커맨드를 쳐서 모듈 A를 다운받았다고 해보자. 이러면 package.json이 변경되고(A라는 모듈이 dependencies 목록에 추가될 것이다.) github에 이 package.json 파일까지 merge가 되어 B가 pull하고 나서 npm install을 했을 때 모듈 A가 설치되는 것이다.

결론은 위 에러가 뜨는게 다른 사람/혹은 내가 모듈을 설치할 때 npm install A과 같이 모듈을 설치해서 package.json에 해당 모듈이 올라가지 않았을 때 발생하는 문제일 수도 있다. 이럴 경우 package.json에서 에러가 뜨는 모듈이 존재하는지 확인해보자. 만약 없다면 save 옵션을 붙여서 모듈을 다시 저장해주면 된다.

모듈은 다 정상적으로 설치되어 있을 경우

1. 정말 극단적인 방법을 시도해보는 것은 node_modules 라는 폴더를 다 지웠다가 react-native 앱 폴더 디렉토리에서 npm install을 해서 다시 모든 node module들을 다시 설치하는 것이다.

물론 나는 이런 방법을 시도했을때 된 적도 있었지만 안 된적도 있었다. 이 방법은 굉장히 오랜 시간이 걸리기 떄문에(나는 삭제하는데 20분, 다시 npm install로 설치하는데 40분이 걸렸다) 추천 하지 않는다.

1. 다른 방법은 위에 에러 메세지에 뜬 4가지 방법을 다 해보는 것이다. 안되는 명령어도 있을텐데 그런 명령어는 건너뛰고, 윈도우 cmd 명령어로 바꿀 수 있는 명령어들은 바꿔서 실행해본다.
2. 또다른 방법은 stack overflow에 많이 추천을 받은 방법인데, 나는 이 방법을 시도해서 한 번도 해결한 적은 없었다. react-native start --reset-cache / npm cache clean --force로 캐시를 모두 없애주면 된다. 웃긴건 이 명령어를 실행하면

이렇게 콘솔창에 뜨는데 무섭다. 그래도 그냥 무시해주면 된다.