[React] Eslint 관련 오류 해결하기

첫번째 오류

🔥 오류 내용

ERROR in [eslint] Plugin "react" was conflicted between 
"package.json » eslint-config-react-app » C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\eslint-config-react-app\base.js" 
and 
"BaseConfig » C:\choi\SideProjects\oneNth\1-n-Web-Frontend\node_modules\react-scripts\node_modules\eslint-config-react-app\base.js"

리액트를 쓰면서 이런 오류는 처음봤다.
yarn start로 프로젝트를 실행시키면 이렇게 오류가 등장하고, package.json을 ctrl+s 로 저장하면 정상 실행되는... 그런 오류였다.

🚿 해결 방법

구글링을 한 결과, casing 문제, 즉, 대소문자 문제라고 하였다.
위의 오류에서 파일 경로가 두개 나와있는데, 잘 보면 첫번째 경로에는 1-n-web-frontend로 되어있고 두번째 경로에는 1-n-Web-Frontend라고 되어있다. 대소문자가 다르다.

이건 윈도우 환경에서 발생하는 문제인데, 이전 버전의 리액트는 대소문자 구분 없이 경로를 찾았지만 업데이트 후 변경된 모양이다.

현재 저장된 형태는 1-n-Web-Frontend이었기 때문에, 이를 1-n-web-frontend 로 변경해주었다.

그래서 이 오류는 해결!✨

---

두번째 오류

🔥 오류 내용

첫번째 오류를 해결했더니 모든 컴포넌트에 대해 아래와 같은 오류들이 발생하였다.

Parsing error: require() of ES Module C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\eslint\node_modules\eslint-scope\lib\definition.js 
from C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\babel-eslint\lib\require-from-eslint.js not supported.

Instead change the require of definition.js in 
C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\babel-eslint\lib\require-from-eslint.js 
to a dynamic import() which is available in all CommonJS modules

역시 구글링...

🚿 해결 방법

이 오류의 원인은 deprecated된 babel-eslint를 사용하려했기 때문이었다. 현재 babel-eslint는 @babel/eslint-parser로 옮겨졌다.

따라서, package.json 파일의

babel-eslint": "^10.0.2

부분을,

@babel/eslint-parser": "^7.5.4"

로 수정해주었다.

그 후, 터미널에서 yarn install을 실행하였다. (npm의 경우 npm i)

그후 다시 yarn start로 프로젝트를 실행해보았더니, 컴포넌트마다 발생했던 오류는 모두 사라지고 아래와 같은 오류가 등장했다.

[eslint] Failed to load parser 'babel-eslint' declared in 
'package.json » eslint-config-react-app » C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\eslint-config-react-app\base.js': 
Cannot find module 'babel-eslint'
Require stack:
- C:\choi\SideProjects\oneNth\1-n-web-frontend\node_modules\eslint-config-react-app\base.js

오류 내용을 보면 현재 node_modules\eslint-config-react-app\base.js 에서 babel-eslint를 못찾고 있다는 것을 알 수 있다.

우리는 babel-eslint를 쓸 것이 아니기 때문에,
node_modules\eslint-config-react-app\base.js 파일을 열어서

parser: 'babel-eslint',

라고 적혀있는 부분을,

 parser: "@babel/eslint-parser",

로 변경해주었다.

그랬더니 오류 완전히 해결💖!

---

느낀 점

구글링으로 해결할 수 있는 문제라서 정말 다행이었다...ㅎㅎ
프로젝트 설정 관련해서도 신경쓸게 꽤 있다는 것을 다시금 체감한 하루였다 😛

---

출처🔖

• 첫번째 오류 해결 방법 : stackOverFlow
• 두번째 오류 해결방법 : stackOverFlow