열어보며

'뚜-잇! 종합 플래너' 프로젝트의 초기 환경을 구축중인 상태이다.

yarn run으로 react를 돌렸는데 바벨 버전의 의존성 문제가 발생한 것으로 보인다.

문제

yarn run 실행 시

"babel-loader": "8.1.0" 오류 발생

 v1.22.17
info Commands available from binary scripts: acorn, acorn.cmd, acorn.ps1, ansi-html, ansi-html.cmd, ansi-html.ps1, atob, atob.cmd, atob.ps1, autoprefixer, autoprefixer.cmd, autoprefixer.ps1, babylon, babylon.cmd, babylon.ps1, browserslist, browserslist.cmd, browserslist.ps1, css-blank-pseudo, css-blank-pseudo.cmd, css-blank-pseudo.ps1, css-has-pseudo, css-has-pseudo.cmd, css-has-pseudo.ps1, css-prefers-color-scheme, css-prefers-color-scheme.cmd, css-prefers-color-scheme.ps1, cssesc, cssesc.cmd, cssesc.ps1, detect, detect-port, detect-port.cmd, detect-port.ps1, detect.cmd, detect.ps1, electron, electron.cmd, electron.ps1, envinfo, envinfo.cmd, envinfo.ps1, errno, errno.cmd, errno.ps1, escodegen, escodegen.cmd, escodegen.ps1, esgenerate, esgenerate.cmd, esgenerate.ps1, eslint, eslint-config-prettier, eslint-config-prettier.cmd, eslint-config-prettier.ps1, eslint.cmd, eslint.ps1, esparse, esparse.cmd, esparse.ps1, esvalidate, esvalidate.cmd, esvalidate.ps1, extract-zip, extract-zip.cmd, extract-zip.ps1, he, he.cmd, he.ps1, html-minifier-terser, html-minifier-terser.cmd, html-minifier-terser.ps1, 
import-local-fixture, import-local-fixture.cmd, import-local-fixture.ps1, is-ci, is-ci.cmd, is-ci.ps1, is-docker, is-docker.cmd, is-docker.ps1, jest, jest-runtime, jest-runtime.cmd, jest-runtime.ps1, jest.cmd, jest.ps1, js-yaml, js-yaml.cmd, js-yaml.ps1, jsesc, jsesc.cmd, jsesc.ps1, json5, json5.cmd, json5.ps1, loose-envify, loose-envify.cmd, loose-envify.ps1, lz-string, lz-string.cmd, lz-string.ps1, miller-rabin, miller-rabin.cmd, miller-rabin.ps1, mime, mime.cmd, mime.ps1, mkdirp, mkdirp.cmd, mkdirp.ps1, multicast-dns, multicast-dns.cmd, multicast-dns.ps1, nanoid, nanoid.cmd, nanoid.ps1, node-which, node-which.cmd, parser, parser.cmd, parser.ps1, prettier, prettier.cmd, prettier.ps1, react-scripts, react-scripts.cmd, react-scripts.ps1, regjsparser, regjsparser.cmd, regjsparser.ps1, rimraf, rimraf.cmd, rimraf.ps1, rollup, rollup.cmd, rollup.ps1, sane, sane.cmd, sane.ps1, semver, semver.cmd, semver.ps1, sha.js, sha.js.cmd, sha.js.ps1, svgo, svgo.cmd, svgo.ps1, terser, terser.cmd, terser.ps1, tsc, tsc.cmd, tsc.ps1, tsserver, tsserver.cmd, tsserver.ps1, uuid, uuid.cmd, uuid.ps1, watch, watch.cmd, watch.ps1, webpack, webpack-cli, webpack-cli.cmd, webpack-cli.ps1, webpack-dev-server, webpack-dev-server.cmd, webpack-dev-server.ps1, webpack.cmd, webpack.ps1, which, which.cmd, which.ps1
info Project commands
   - build
      webpack && electron .
   - eject
      react-scripts eject
   - start
      webpack
   - test
      react-scripts test
question Which command would you like to run?: test
$ react-scripts test

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

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

  Z:\do-it-client\node_modules\babel-loader (version: 8.2.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 "babel-loader" 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 Z:\do-it-client\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-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

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.

error Command failed with exit code 1.

Solutions

친절하게도 에러 메시지에 모든 해결방법을 제시한다.

SOL1

.env 파일에 아래의 명령을 삽입하고 저장한다.
단순 에러 무시명령으로, 근본적 해결책이 아니다.

SKIP_PREFLIGHT_CHECK=true

SOL2

yarn이 babel-loader 버전 8.1.0을 확인할 수 있도록 package.json에 다음을 추가하는 방법

"resolutions": {
  "babel-loader": "8.1.0"
},

이후 yarn install 을 실행하여 종속성을 맞춰주고 yarn.lock 파일을 업데이트한다.

SOL3

위의 방법으로 해결되지 않는다면, 라이브러리 자체가 아예 설치되어있지 않은 경우일 것 이다. 별도로 설치한 적도 없는데 버전이 맞지 않는다는 상황이라 위와 같은 방법으로 처리하여도 원인이 맞지 않아 해결되지 않는 것이다.

이 경우 프로젝트 내의 node_modules에서 라이브러리를 참조한게 아니라, 외부에 존재하는 글로벌 라이브러리를 참조해서 발생하는 문제인 것 이다.

그렇다면 global에 설치된 충돌하는 라이브러리를 직접 찾아가서 삭제하여 문제를 해결할 수 있다.