[React] yarn install 중 "babel-jest": "^26.6.0" 오류

[상황]
리액트 프로젝트 중 package.json 파일에 있는 dependencies을 토대로 yarn install 후 yarn start 시 발생

[에러 로그]
yarn install v1.22.19
warning ..\..\..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "react-hot-toast > goober@2.1.8" has unmet peer dependency "csstype@^3.0.10".
warning " > babel-loader@8.1.0" has unmet peer dependency "webpack@>=2".
[4/4] Building fresh packages...
Done in 1004.22s.
C:\Users\SAMSUNG\Desktop\SoloveTest\pangpang>yarn start
yarn run v1.22.19
warning ..\..\..\package.json: No license field
$ react-scripts start
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "babel-jest": "^26.6.0"
Don't try to install it manually: your package manager does it automatically. However, a different version of babel-jest was detected higher up in the tree: C:\Users\SAMSUNG\node_modules\babel-jest (version: 27.5.1)
Manually installing incompatible versions is known to cause hard-to-debug issues. If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder. 4. Run npm install or yarn, depending on the package manager you use. In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\SAMSUNG\node_modules\babel-jest is outside your project directory. For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-jest in your project folder. This will tell you which other package (apart from the expected react-scripts) installed babel-jest. If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway. P.S. We know this message is long but please read the steps above :-) We hope you find them helpful! error Command failed with exit code
1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

react-app 에서 요구하는 babel-jest의 버전은 26.6.0이지만 실제로 사용된 모듈은 27.5.1 이라는 의미다. 당연히 첫번째 방법으로 package.json 파일을 수정하여 재설치하는 [해결1] 방법을 사용하였다.

[해결1] : 실패
종속성 문제로 판단하여 package.json 파일에 
"dependencies" :{
"babel-jest" : "^26.6.0"
}
을 추가하여 종속성을 추가하고, node_modules 파일을 삭제 후 다시 yarn install 하여 node_modules 파일을 설치하였다. 하지만 babel-jest 말고 다른 모듈의 이름으로 똑같은 종속성 문제가 발생하였다.   모든 모듈들의 종속성을 수동으로 바꿔주기엔 상당히 무리가 있어 보인다. 하지만 한, 두개의 모듈의 문제가 생겼으면 [해결1]의 방법을 채택하는것도 괜찮아 보인다.

하지만 실패하였고 구글링을 통해 node_modules 파일이 컴퓨터 내에 여러개 있을 경우 겹치는 경우가 발생함을 알게되었다.  그리고 에러로그를 확인한 결과 이번 에러의 원인을 알았다.

[해결2] 
Don't try to install it manually: your package manager does it automatically. However, a different version of babel-jest was detected higher up in the tree: C:\Users\SAMSUNG\node_modules\babel-jest (version: 27.5.1)

이 문장에서 내 C드라이브 안 SAMSUNG\node_modules 의 버전이 27.5.1 이라는 것을 알게 되었다. 그래서 SAMSUNG안 node_modules파일을 삭제해주고 아까 변경한 package.json파일을 수정하여 프로젝트 폴더 내의 node_modules를 삭제 후 다시 yarn install 해주면서 문제를 해결 할 수 있었다.

 

추가로 package.json파일 내 버전을 확인하던 중 알게 된 버전표기방식이다.
* : 해당 모듈의 어떠한 버전을 설치해도 무방함 ( npm install 명령어를 입력했을 때 최신 버전 설치 됨)
>1.0.0 : 1.0.0 버전보다 높은 버전이 설치 됨
^1.0.0 : 해당 버전과 호환되는 버전이 설치 됨( 1.0.0 이상, 2.0.0 미만의 버전 중에서 최신 버전이 설치 됨 )
>=, <,<,= 생략

 

dependencies란 간단히 내가 느낀바로는 '라이브러리가 요구하는 라이브러리의 조건'이다. 라이브러리끼리 서로 얽히며 개발되므로 생긴 것으로 느껴진다. peer dependencies, dev dependencies 차이가 있는 것을 알게 되었다. 그리고 제대로 설치하면 이번에와 같은 문제는 안 생길 것으로 예상된다. 

 

 

 

 

 

 

추가로 패키지의 peer dependencies에 관한글이다. https://yceffort.kr/2021/10/debt-of-package-json

Home

출처: https://k9e4h.tistory.com/149 

[NPM] PEER DEPENDENCY? RC5?