React 설치시 "babel-loader": "8.1.0" 오류

오늘 처음으로 리액트를 설치해서 실행해보았다.

 

우선 나는 여러모로 복잡한 상황에 놓여있었는데

1. 컴알못
2. 코딩 잘 못함
3. 맥 사용

 

총체적 난국..

 

그래서 여기저기 사이트 돌아다니며 힌트를 얻어서 설치까지 완료했다.

윈도우랑 다르게 맥은 터미널로 나에겐 생소하고 어려웠던 명령어를 사용해 설치를 해야했기 때문에 거의 복붙으로 해결봤던 것 같다.

 

바벨이고 얀이고 뭐가 뭔지 하나도 몰라서 이거도 해보고 저거도 해보고 다 했는데 설치가 다 된 후에 yarn start를 치니 연결이 안 되고 오류가 계속해서 뜨는 것이었다. 

대략 내용은 바벨 버전이 높아서 안된다는 것 같은 느낌?

here 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-loader": "8.1.0"

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

Users\username\node_modules\babel-loader (version: 8.2.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If 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-eslint" 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\useranme\node_modules\babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.

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!

 

뭔가 .env 파일을 만들어서 SKIP_PREFLIGHT_CHECK=true 이 문구를 넣으면 이런 오류를 무시하고 실행할 수 있다는 것 같은데, 문제는 env 파일을 어떻게 만드는건지 모른다는 것이었다..^0^.....

 

그래서 내가 찾은 방법은

1. babel-loader 라는 것을 저기서 앞서 알려준 8.1.0 버전으로 준비한다.

2. 다 지우고 새로 깐다 (이것 또한 모험)

3. 포기한다

 

역시 가장 무난한 방법이 1이 아닐까 싶어 알아보니 수동으로 파일을 바꾸면 디버깅하기 어려워진다고 하지 말라고 하더라. 

 

그래서 또 구글구글 하다가 다시 꼼꼼히 저 글을 읽어보니 package.json 파일에서 어쩌구 하는거 보니 그걸 바꾸면 되지 않을까 싶어서 맥 전체 검색으로 package.jsond을 검색하니.... 오마갓 너무 같은 이름의 파일이 많음을 발견..

 

하나하나 폴더를 눌러보니 하단에 

이런식으로 주소가 뜨길래  8.2.2로 적혀있다는 파일을 직접 찾아 들어가기 시작했다.

 

그래서 package.json 파일을 킨 다음 맨 밑에 있는 버전을 수기로 수정하기 시작함..

152번에 원래는 8.2.2로 적혀있던 것을 터미널에서 알려준 버전으로 바꾸고 저장한뒤 다시 터미널에서 yarn start를 쳐서 실행을 해보려 했으나......!

 

이번엔 웹팩? webpack 버전이 다르다며 5.11.0을 4.44.2로 바꿔야 한다고 써있길래 또 해당 과정을 반복해서 바꿈.

 

그리고 터미널에서 yarn start를 실행해보니 아주 잘 연결이 되었다! : ) 히히 

나중에 어마무시한 일이 생길지라도 당장은 해결이 되었으니 기분이 좋다.