8시간의 삽질 그리고 얻은 건..

2019년 3월 24일 (일)

8시간의 삽질 그리고 얻은 건..

• 오늘 create-react-app으로 React 프로젝트를 만들고 npm 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-eslint": "9.0.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:

  c:\Users\username\node_modules\babel-eslint (version: 10.0.1)

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-eslint 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!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! class101@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the class101@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

• 읽어보니 babel-eslint 버전이 맞지 않는 것 같아서 친절하게 번호까지 매겨져 있는 설명을 따라
  차근차근 시도해 보았지만 변화한 건 없었다.
• 구글에 위의 에러 내용을 검색하여 stackoverflow나 다른 블로그들에 나온 해법들을 적용해보았으나 해결되지 않았다.

• 오후 2시부터 오후 10시 10분 가량까지 약 8시간 동안 이 에러 하나 고쳐보겠다고 구글링을 열심히 했는데, 결국
  완전히 해결하지는 못했다. 강제로 파일을 날려버리고 새로 설치하는 것도 시도해봤는데 어디가 꼬인 건지 아직 찾지 못했다.
  위의 에러 내용에 나온 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.를 참고해서
  React project 폴더의 .env파일에 SKIP_PREFLIGHT_CHECK=true를 넣어서 오류를 무시하고 우선은 띄우기로 했다.
  그 후에 npm start를 했더니 화면이 띄워진다. 문제를 해결한 것이 아니기에 속시원하지는 않다.

• 8시간 동안의 삽질이었다. 그리고 그 결과로 완전히 해결책을 얻은 것도 아니다. 임시 방편을 사용해서 우선은 프로젝트를 할 수 있는 정도.

• 이 8시간 동안의 삽질을 하면서 그 과정에서 ‘내가 개발자로서 살아가는 인생에서 삽질은 계속 되겠구나..’라는 생각이 들었다.
• 이 오랜 삽질이 언제 끝날지도 모르고 그 삽질의 결과로 유의미한 결과를 얻을 수 있을지 불확실하다.
• 이 불확실함에도 포기하지 않고 해결 방안을 찾아보고 계속해서 적용해보는 자세.
  그걸 얻었으면 그것으로도 오늘 하루의 삽질이 내 개발자로서의 삶에 굉장히 의미있는 순간이라고 생각한다.
• 오늘 만난 이 에러는 더 검색해 보고 해결 방안을 찾아보도록 해야겠다.