git clone시 패키지 모듈 찾지 못하는 문제
디렉토리 구조
B1G1
|- FE
|_ BE
git clone으로 프로젝트를 받아왔을 때, 편집기(VSCode)로 프로젝트를 open해보면 모든 패키지를 찾지 못하는 문제가 발생했다.
Cannot find module 'react' or its corresponding type declarations.ts(2307)
yarn installyarn dlx @yarnpkg/sdks vscode-
yarn remove typescript+yarn add typescript yarn set version berry- VSCode Extension
ZipFS설치 - yarn 관련 모든 파일 삭제 후 재설정
처음에는 yarn berry의 문제인줄 알고 yarn을 계속 갈아엎거나 경로설정을 재설정하는 등의 방법들을 시도해보았다. 하지만 yarn berry를 채택한 이유가 git clone을 해왔을 때 따로 패키지 install을 하지 않아도 되는 zero install 이기 때문이었는데, clone해온 디렉토리에서 이러한 재설정들을 계속하여 문제를 해결한들 yarn berry를 사용할 이유가 있을까 하는 의구심이 들었다.
결론은 우리의 프로젝트는 루트 디렉토리 내에 FE 디렉토리, BE 디렉토리가 나누어져있다. 이때 루트 디렉토리인 B1G1을 VSCode로 open하면 VSCode가 워크스페이스의 타입스크립트의 버전을 특정하지 못해 생기는 문제였다.
처음 프로젝트를 git clone해왔을 때도 프로젝트 실행은 되었지만 VSCode에서 코드를 볼 때만 에러가 출력되고 있었는데, 여기서 yarn berry의 문제가 아닌 VSCode의 문제라는 것을 좀 더 빨리 알아챘었다면 좋았을 것 같다.
각 FE, BE 프로젝트는 yarn run 등으로 프로젝트를 빌드하거나 실행할 때는 문제없이 잘 작동하지만, VSCode IDE 상에서 모듈을 찾을 수 없다는 에러메시지가 계속해서 발생하였다. 그래서 VSCode가 node_modules/ 폴더가 아닌 .yarn/ 폴더에 ZipFS 형식으로 관리되는 모듈을 제대로 인식하지 못해서 생기는 문제가 아닐까 하는 추측을 해보았다.
관련하여 자료조사 중 비슷한 문제에 대한 해결을 TypeScript 버전 설정을 VSCode 자체 설정이 아닌 Workspace 내의 .yarn/sdks/typescript/lib 에 명시된 버전으로 이용하도록 바꾸면 모듈 인식 문제가 해결된다는 사실을 발견하고, 비슷한 방식으로 설정을 시도해 보았다.
하지만 여기서 "Use Workspace Version" 옵션이 활성화되지 않아 이 .yarn/sdks/typescript/lib 경로를 모노레포 형식의 프로젝트 특성 상 VSCode에서 인식하지 못하는 것이 아닐까 하는 의구심을 가지게 되었다.
따라서 일반적인 프로젝트 구조와 동일하게 만들기 위해 모노레포인 프로젝트 루트가 아닌 FE, BE 폴더 내부에서 VSCode를 다시 실행해보았더니 잘 동작했다!
왼쪽이 루트폴더에서 cmd + shift + p 후 TypeScript: Select TypeScript Version... 선택 했을때 보이는 선택지, 오른쪽이 FE폴더에서 선택했을 때 보이는 선택지이다. 루트폴더에서는 워크스페이스의 타입스크립트 버전을 특정하지 못하는 모습이다.
해당 설정을 적용하면 .vscode/ 폴더에 settings.json 이란 파일이 생성되어 아래와 같은 설정이 적용되는데,
{
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
이를 모노레포 프로젝트 루트에 옮기고, 상대경로를 (FE/..., BE/... 등으로)잘 설정해주면 VSCode에서 TypeScript 설정 시 해당 경로를 인식하게 해 줄 것이라고 생각되었다!
최종 해결 방법
FE 또는 BE 폴더 자체를 VSCode로 open
yarn install + yarn dlx @yarnpkg/sdks vscode
TypeScript 관련 알럿 창 Allow 또는 cmd + shift + p 후 TypeScript: Select TypeScript Version... 선택, Use Workspace Version 선택
만약 루트 폴더에서 설정하고 싶다면 루트폴더에 .vscode 폴더 생성 후 그 안에 setting.json을 만들어주고,
{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
},
"eslint.nodePath": "./FE/.yarn/sdks",
"prettier.prettierPath": "./FE.yarn/sdks/prettier/index.cjs",
"typescript.tsdk": "./FE/.yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
이 내용을 넣어주면 된다. 핵심은 모든 path에 ./FE/ 를 붙히는 것으로 워크스페이스를 특정시켜 VSCode에게 알려주는것이다.