React ERROR in [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app 오류 해결 방법 | 전역 패키지 제거

React로 웹 서비스를 제작한 적이 있는데,

npm start 명령어를 실행하면 뜨는 웹 브라우저를 봤더니

 

ERROR in [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\파일경로\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\파일경로\Roaming\npm\node_modules\react-scripts\node_modules\eslint-config-react-app\base.js".

위와 같은 에러가 떠있었다.

 

찾아보니, ESLint 설정에서 "react" 플러그인 충돌이 났다는 것을 의미한다고 한다.

여기서 '충돌'은 동일한 플러그인이 두 개의 다른 위치에서 불러와져서 발생한 문제라고 한다.

따라서 해결 방법은 간단한다.

두 개가 충돌한 것이니, 둘 중 하나를 제거해주면 되는 것!

 

 

그 전에 ESLint가 무엇인지 간단하게 알아보자

ESLint란?

- JavaScript 코드에서 발견될 수 있는 문제 패턴 식별을 위한 정적 코드 분석 도구
- 개발자들이 코드 작성 시 일관된 스타일을 유지하고, 버그를 미리 발견해 수정할 수 있도록 도움
- 사용자 정의 규칙을 설정할 수 있어, 프로젝트 특유의 코딩 규칙 적용 가능

 

오류 메시지에 보이는 eslint-config-react-app은 React 애플리케이션을 위한 ESLint 설정들을 모아둔 패키지 !

=> ESLint 플러그인들은 npm 패키지 형태로 제공되고 관리되기 때문에, 문제가 발생하면 패키지를 제거해주면 된다.

 

반응형

 

[해결 방법]

1. 로컬 및 전역(global) 패키지 확인해보기

1) 프로젝트 최상위 디렉토리로 이동해서 로컬 패키지를 확인해보자

npm list eslint-config-react-app

 

2) 전역 패키지도 확인해보자

npm list -g eslint-config-react-app

 

 

2. 패키지 제거

이 에러가 났다는 건, 로컬과 전역에 모두 패키지가 설치되어 있는 것으로 뜰 것이다.

그럼 둘 중 하나를 제거해주자 !

대부분의 경우에는 프로젝트에 특화된 설정이 필요하기 때문에, 전역으로 설치된 eslint-config-react-app을 제거하는 편이라고 한다.

npm uninstall -g eslint-config-react-app

=> 이렇게 하면 전역 패키지가 제거된다 !

 

 

이제 다시 npm start를 해보면 해당 에러가 해결되어 있을거다 !