#1 unhandled Runtime Error TypeError: Cannot read property 'default' of undefined 오류
각 상황에 따라 다른 오류 메시지들을 볼 수 있겠지만 원래 잘 작동되던 코드가 똑같이 실행했을 때, 오류를 내뿜는다면
의존성 문제를 의심해봐야 합니다.
저희는 git clone을 하고 npm 모듈을 받기 위해 npm install을 이용하여 모듈을 설치합니다.
npm은 패키지 매니저로서, 개발에 필요한 패키지를 관리하기 위한 툴입니다.
모든 사람들이 같은 개발환경을 구축하기 위해서 중요한 역할을 하고 있는 고마운 녀석입니다.
개발을 시작할 때, npm init 커맨드의 의해 package.json이 추가되는데 이곳에 사용하고 있는 패키지 이름과 버전에 대한 정보가 있는 것을 알고 계실겁니다.
npm install, npm -i save 등을 실행하면 package.json의 dependencies가 갱신되면서, package-lock.json이라는 파일이 추가됩니다.
npm install 시, a라는 사람이 1.0.0을 npm install 하려고 할 때, 새로운 버전이 발표되었을 경우, 완전히 다른 버전이나 취약성이 포함된 1.1.0이 설치될 수도 있습니다.
즉, npm install과 package.json으로, 모든 사람이 완벽히 같은 개발환경을 구축하는 것이 불가능하다고 이해하시면 될 것 같습니다.
실제로 npm install 시, 개발환경이 맞지 않아 오류가 났었기 때문에 이 글을 쓰고 있습니다.
#2 개발환경 구축
같은 개발환경을 구축하려고 할 때 package-lock.json이라는 녀석을 통해 기본적으로 node_modules 디렉토리 전체를 알 수 있기 때문에 package-lock.json을 푸쉬합니다.
package-lock.json이 있으니 npm install을 받는 경우엔 똑같은 개발환경이 되겠지라고 생각했었지만 실제로 npm install을 통해 갱신되는 경우가 있습니다.
npm ci
- node_modules 디렉토리 삭제
- package-lock.json과 package.json의 정합성 체크
- package-lock.json으로부터 node_modules를 구성
즉, npm install처럼 마음대로 package-lock.json을 갱신하는 것이 아니라, 같은 node_modules를 구성하는 것이 가능합니다.
이렇게 함으로서 완전히 같은 개발환경을 구축하여 해결할 수 있습니다.