ESlint와 Typescript 버전 ERROR 해결

에러 메세지는, 문제 해결 방법을 알려주는 signal이다

프로젝트 처음 시작할 때, default로 eslint를 설치했었는데, ERR ERR ERR ERR가 발생했었다. 근데도 eslint파일이 생성되고, 프로젝트 실행이 잘 됐어서 에러 해결의 필요성을 못느끼고 프로젝트를 진행했었다.

그때 에러가 나지 않았던 이유는

뭔가 새로운 라이브러리를 설치하지 않고 아주 간단한 Todo를 만들었기 때문이었다ㅋㅋㅋㅋ 연습 겸, react와 styled-components, react-router-dom을 설치해 프로젝트를 진행하려고 하는데, 자꾸 에러가 발생했다. 처음에는 에러 메세지에 ERR 만 뜨고, 그다지 내용이 없는 줄 알았다. 그래서 에러의 원인은 찾지 못한 채, 괜히 구글링만 하면서 이것저것 겉돌기만 했다. 이렇게 하면 끝도 없겠다 싶어서. 에러 메세지로 다시 돌아갔다.

다시 에러 메세지를 훑어보기 시작했다.

에러 메시지는 나에게 문제 해결 방법을 알려주고 있었다. 지금 너의 프로젝트에 eslint-parser 5버전이 있는데, 의존성 관련한 문제 해결이 안돼. 너는 eslint-parser 6버전을 깔아아해@_@ (대충해석) 라는 signal을 나에게 계속 보내고 있었던 것이었다. !!!!!!!!!!!!!!!!!!

 

결론: 에러가 난다면 확인을 해줘야 한다.

설마….. 하고 기존에 있던 parser를 지우고 버전을 명시해 install하였더니… 뫄씌.,해결됐다. 프로젝트에서 사용 중인 @typescript-eslint/eslint-plugin 패키지가 특정 버전의 @typescript-eslint/parser 패키지를 필요로 하고 있지만 해당 버전이 설치되어 있지 않아서 에러가 발생함

npm uninstall @typescript-eslint/parser
npm install @typescript-eslint/parser@^6.0.0 --save-dev

// 에러 해결 후, eslint-plugin 재설치
npm install @typescript-eslint/eslint-plugin --save-dev 

---

[ 추가 ] Effective-TypeScript의 내용이 생각이 난다.

 

6장에 type선언과 @types : 타입 선언과 관련된 세 가지 버전을 이해해야 한다

<aside> 🚫 타입스크립트는 알아서 의존성 문제를 해결해주지 않는다. 개발자는 라이브러리 버전, @types 타입선언의 버전, 타입스크립트의 버전 이 세가지를 추가로 고려해줘야 한다.

</aside>

오늘 아침에 겪었던 에러는 eslint-parser와 eslint-eslint-plugin의 버전이 맞지 않아서 생겼던 문제였지만, 기존 PJ에서 만난 에러는 한가지가 더 있었다. 프로젝트를 생성했을 때 TS버전과, eslint 등의 버전에서 문제가 발생하였던 것이다. 그래서 TS버전을 다운그레이드하여 문제를 해결했다

나는 오늘 겪어봤다. 타입스크립트의 버전 문제에 대하여…. 책에서 배운 지식은 어디 안간다. 다 나에게로 돌아온다는 사실을 또 한번 깨닫는다. 그리고 추가적으로 스터디하면서 또 배운게 있다.

 

[ 추가 ] TypeScript는 devDependencies에 설치해야 한다

TypeScript와 @types에 관련된 부분은 컴파일 이후에는 사라지기 때문에, 런타임까지 의존성들을 가지고 있을 필요가 없다. 그렇기 때문에 개발시에만 사용하는 devDependencies에 설치해주는 것이 맞다. 요 부분을 공부했던 게 생각이 나서, dependencies에 섞여 있었던 type관련 라이브러리들을 devDependencies로 옮겨주었다.