npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@6.5.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/eslint-plugin@6.5.0
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"6.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\sky_o\AppData\Local\npm-cache\_logs\2023-09-01T03_53_20_664Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\sky_o\AppData\Local\npm-cache\_logs\2023-09-01T03_53_20_664Z-debug-0.log
Successfully created .eslintrc.json file in D:\00. Coding Archive\01. Git Repositories\Private Project\prj04remake

CRA로 React.js app을 새로 생성하고, eslint를 설치한 뒤 init하는 과정에서 위와 같은 에러가 발생하였다.

1. 패키지 사이의 의존성 충돌.

에러의 발생 원인은 @typescript-eslint/parser와 @typescript-eslint/eslint-plugin 사이에서 의존성 충돌이 발생하고 있기 때문.

내가 수동으로 설치하는 것도 아니고 eslint의 init 명령어로 사전에 준비된 절차에 따라 설치를 하고 있음에도 이런 에러가 발생해서 매우 당황했지만, 우선 해결 방법을 찾는 것이 먼저이다.

NPM 7 버전 이후 의존성 문제.

NPM v7 이후로 새로운 의존성 해결 알고리즘이 도입되어 의존성 충돌에 대한 기준이 더 엄격해졌다고 한다. 의존성 충돌의 원인은 아래와 같은 것들이 있다고 한다.

프로젝트에 이미 설치된 패키지와 새롭게 설치하려는 패키지 간의 충돌.

프로젝트의 다른 패키지들이 특정 패키지의 버전을 요구하는 경우, 그러한 요구사항들 사이에 충돌이 발생.

해결 방법은?

npm install --legacy-peer-deps

NPM 7 버전 이전의 의존성 해결 방식을 사용하도록 하는 것.

적절한 버전의 패키지 설치

충돌하는 패키지의 버전을 확인하고, 호환되는 버전을 직접 설치한다.

node_modules 폴더와 package-lock.json 파일 삭제후 재설치

가끔 node_modules 폴더나 package-lock.json 파일에 문제가 생길 수 있어, 둘다 삭제한 다음 npm i로 재설치해주면 문제가 해결될 수도 있다고 한다.

2. 그런데 나는..

내가 저 에러를 경험했던 상황은 CRA로 React.js App을 설치하고, ESLint를 추가로 설치했을 때 발생했었다. 그런데 CRA는 기본적으로 ESLint를 내장하고 있기 때문에 별도로 ESLint를 설치할 필요가 없다. 이미 설치되어 있는 것을 또 설치하려고 하니 당연히 의존성 충돌이 발생한 것.

해결 방법은 간단했다. CRA 이후에 ESLint를 또 설치하지 않는 것..