[eslint] Failed to load parser 'babel-eslint' declared in 'package.json' 에러 해결 방법

이 에러를 포스팅 하는 이유

React를 사용하는 경우 초심자가 자주 마주치는 에러 중 하나로,

CSS 파일이나 Package.json 파일에 새로고침을 해주면 순간적으로 없어지긴 하지만, 매번 yarn start를 할 때마다 발생하다보니,

해결하지 않으면 매우 귀찮은 에러이기 때문에 해결하는 방법을 기록해보려고 한다.

 

이 에러의 원인은?

해당 에러는 babel-eslint가 deprecated 되었기 때문에 사용할 수 없어 발생하는 문제이다.

그래서 이 에러를 해결하려면 babel-eslint를 @babel/eslint-parser로 변경해주면 된다.

 

이 에러의 해결 방법은?

1. VSCode 또는 사용하는 IDE로 에러가 발생하는 리엑트 파일을 엽니다.

2. node_modules 디렉토리(폴더) 안의 eslint-config-react-app / base.js 파일을 열어봅니다.

3. 해당 파일 코드를 보면, module.exports 안에 parser 부분이 있는데, 이 부분을 @babel/eslint-parser로 변경해주면 됩니다. 

(원래는 아래 주석처럼 babel-eslint로 되어있을건데, 이 부분을 아래 코드처럼 바꿔주면 됩니다.)

4. 다시 yarn install을 한 후, yarn start로 실행해보면 에러가 해결돼있습니다.