yarn berry 모노레포 셋팅 과정에 겪은 이슈에 대해 다뤄보겠습니다.
cannot find module 에러
yarn berry로 설치하면 PnP 때문에 typescript를 인식하지 못하는 문제가 있다.
공식 문서에서 아래와 같이 안내한다.
$ yarn dlx @yarnpkg/sdks vscode
command + shift + p
Select Typescript Version 검색
Use Workspace Version 선택
Eslint
typescript 프로젝트에서 플러그인의 조합에서 문제가 발생
"typescript": {
"project": "./packages/**/tsconfig.json"
}tsconfig에서 project 프로퍼티의 경우 glob 패턴을 사용한 문자열도 넣을 수 있기 때문에 위와 같이 작성이 가능할걸로 예상했지만,
실제로는 모든 tsconfig가 모든 프로젝트와 파일의 resolver로 작동하고,
따라서 alias도 특정한 하나의 tsconfig만을 따르고 있다.
각 프로젝트 별로 resolver 설정을 override 해주어야 오류를 내지 않고 정상적으로 린팅이 된다.
"overrides": [
{
"files": ["packages/package-a/**/*.ts?(x)"],
"settings": {
"import/resolver": {
"typescript": {
"project": "./packages/package-a/tsconfig.json"
}
}
}
},
{
"files": ["packages/package-b/**/*.ts?(x)"],
"settings": {
"import/resolver": {
"typescript": {
"project": "./packages/package-b/tsconfig.json"
}
}
}
},
...
]dev 서버 작동 시 node_modules 폴더 생성
dev 서버 작동 시 이상하게 계속해서 아래와 같은 node_modules 폴더가 생성된다.
package.json의 dependencies에 기재된 패키지들이 트랜스파일링 되어있다.
패키지들은 우리가 작성하는 소스코드와 달리 설치 후에 내용이 바뀌지 않으므로 vite는 패키지들을 이렇게 미리 트랜스파일링 해놓고 캐싱해서 쓴다고 한다.
주요 내용은 생략하고 결론적으로 오류는 아니고 자연스러운 동작인걸 확인했지만,
yarn.lock 파일의 vite > dependencies > esbuild 필드에 목표 버전(^0.15.15)지정으로 해결할 수 도 있어보인다.
ZipFS - zip 파일 시스템
- ZipFS
yarn PnP 모드에서는 패키지를 zip형태로 관리한다.
따라서 사용한 패키지의 원래 코드를 보기위해서는 ZipFS와 같이 zip 저장소에 저장된 파일들을 바로 읽을 수 있는 extension을 설치해주어야 한다.
