리액트 프로젝트 설치 종속성 에러

이 전에 인프런 강의를 보고 따라하다가 에러가 발생한 적이 있어서 한참 찾아서 해결했다가

이번에 깃허브에서 프레임워크 튜토리얼을 따라한다고 클론해서 npm install 을 하는데 같은 에러가 떠서

'하.. 어떻게 하더라..'하면서 다시 똑같은 짓을 반복해 차라리 여기 적어 놓으려고 한다

에러 메시지

에러 메시지는 대충 다음과 같다

---

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:

"jest": "24.9.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:

/Users/.../node_modules/jest (version: 26.6.3)

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 "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 /Users/.../node_modules/jest is outside your project directory.
   For example, you might have accidentally installed something in your home folder.
7. Try running npm ls jest in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed 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!

---

번역기를 돌려본 결과 대충 전하고자 하는 메세지는

프로젝트에서 요구하는 종속성 버전이 맞지 않아서 발생하는 에러..라는 것 같다

속성으로 해결하기

급한 사람은 마지막 문단을 그대로 따라하면 되는데

프로젝트 내부에 환경 변수 파일을 만든 뒤 종속성 버전 검사를 생략하는 설정을 추가해주면된다

방법은 다음과 같다

1. 프로젝트 내부에 .env파일을 만든다
2. .env 파일에 SKIP\_PREFLIGHT\_CHECK=true를 추가한다

이제 프로젝트를 실행하면 잘 돌아갈 것

근본적인 해결 방법

만약 본인이 따로 설치한 라이브러리가 존재한다면 방법1만 시도하면 되겠고

건드린 것 없이 클론만 해서 install했는데 에러가 발생했다면 2번까지 시도하면된다

방법 1

설치한 종속성의 버전이 맞지 않아서 발생하는 에러이니 버전에 맞게 설치해주면된다

1. 프로젝트 내부의 yarn.lock 이나 package-lock.json을 제거한다
2. 프로젝트 내부의 node\_modules폴더를 삭제한다
3. 프로젝트 내부의 package.json파일에서 dependencies 나 devDependencies 하위에 버전에러가 난 라이브러리를 지워준다
4. 다시 npm install 이나 yarn install로 설치한다

3번에서

나의 경우에는 에러가

The react-scripts package provided by Create React App requires a dependency:

"jest": "24.9.0"

라고 말해주고 있으니 jest를 지우면된다

이 라이브러리가 아예 존재하지 않는 사람도 있을 텐데 건드리지말고 밑의

방법 2

위에서 해결된 사람도 있겠지만 그렇지 않은 사람도 있을 것이다

애초에 클론해서 가져온 뒤 바로 install해서 내가 따로 설치한 라이브러리도 없는데 버전이 맞지 않다니..

프로젝트에서 내부에 있는 node_modules에서 라이브러리를 참조하지 않고 외부에 존재하는 라이브러리를 참조해서 그렇다

global로 설치한 라이브러리가 충돌하는 것 같은데 충돌하는 라이브러리를 직접 찾아가서 삭제시켜주면된다

그래도 혹시 모르니 시키는대로 절차를 따르자

5. npm을 사용하고 있다면 yarn으로 바꾼다
6. 프로젝트 외부에 있는 /Users/사용자/node_modules/라이브러리명 을 확인하고 버전이 맞지 않다면 지운다
7. npm ls 라이브러리명 으로 현재 문제가 있는 라이브러리를 어디서 참조하고 있는지 확인한다

7번에서 프로젝트 내부가 아니고 외부를 가르키고 있다면 쫓아가서 없애버리자