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를 해보면 해당 에러가 해결되어 있을거다 !
'IT 정보🤓' 카테고리의 다른 글
코랩 Colab 파이썬 그래프 한글깨짐 무조건 해결 방법 | UserWarning: Glyph 44592 (\N{HANGUL SYLLABLE GI}) missing from current font. (0) | 2024.04.17 |
---|---|
Pandas 구글 코랩 csv 저장 시 한글 깨짐 해결 방법 | 파이썬 cp949 인코딩 (0) | 2024.04.11 |
Mobaxterm 대신 VSCode로 SSH 서버 연결 방법 | Visual Studio Code (0) | 2024.03.24 |
R studio 스튜디오 Choose Encoding 창 한글 깨짐 해결 (0) | 2024.03.22 |
윈도우 R 다운로드 | R Studio 설치 방법 (0) | 2024.03.21 |