모노레포 typescript 인식 에러

오늘 5시간 동안 에러와 싸웠다.

모노 레포에 관련된 글을 쓰면서 직접 빌드해보기 위해 블로그를 참고하며 빌드를 해봤다.

그런데 typescript sdk 설정에서 아무리 똑같이 따라 해도, 다른 블로그를 참고해봐도 도저히 넘어가지지 않았다.

 

yarn을 berry 버전으로 업데이트 해준후

yarn init -w로 workspace 설정을 해주었다.

그리고 모노레포 세팅을 해준 다음

내부 패키지(프로젝트)에서 nextjs를 빌드해주었는데 

에러는 뜨지만 실행은 된다.

전체가 다 빨간색 에러가 떠버렸다.
이러한 에러는 yarn berry와 npm가 모듈을 불러오는 방식이 다르기 때문에 생기는 문제라고 하며
원래 발생해야 하는 에러였고 에러를 해결할 방법도 알고 있었다.

 

이를 해결하기 위해선

yarn add -D typescript prettier eslint
이후
yarn dlx @yarnpkg/sdks vscode

을 터미널에 작성하면 된다고 한다
문제는 이 명령어를 실행해도 빨간줄 에러가 사라지지 않았다는 점이다.

root 의 package.json

devDependencies에 타입 스크립트를 인스톨해놓았고,

작업 영역 버전을. yarn/sdks 파일 내부에 있는 타입 스크립트로 했는데도 불구하고 에러가 해결되지 않았다

내가 잘못 따라 했나...? 싶어 패키지를 지우고 다시 실행해 봐도 마찬가지였다.

 

몇 시간째 고민만 하다가 발견한 것은 타입 스크립트 버전이었다.

VS Code의 버전 사용은 4.9.3 버전이고 sdk의 버전은 4.9.4 버전이라 혹시나 하는 마음에 타입 스크립트 버전을 4.9.3으로 통일하고 다시 빌드해본 결과

 

말끔하게 해결

빨간줄이 모두 없어지고 깔끔한 화면이 되었다

기분이 너무 좋았다. 범인은 타입 스크립트 버전이었다.

  3일 전에 새로운 릴리스가 나왔다고 하는 걸 보니 아직 @yarnpkg/sdk 에서 지원을 안 하는 거 같다.

 

앞으로 알 수 없는 에러가 발생하면 버전을 잘 참고하는 습관을 가져야겠다.

 

 

 

 

 

 

 

 

 

참고한 블로그

https://minify.tistory.com/40

yarn berry로 workspace(monorepo) 구성하기