Yarn PnP가 Typescript를 인식하지 못할때

 

 

Cannot find module 'react' or its corresponding type declarations.

 

 

Yarn berry 버전, 그 중에서도 PnP를 사용해 본 적이 있다면 한 번 쯤은 VSCode가 Typescript를 인식하지 못하는 오류를 겪어본 경험이 있으실겁니다. 보통 프로젝트를 처음 시작할때 가장 많이 발생하고, 이미 진행중인 프로젝트의 구조를 변경하다가 발생하기도 하는 오류입니다. Yarn의 공식 문서에서도 이 문제에 대한 해결 방안을 따로 섹션을 만들어 놓을 정도로 잘 알려진 오류이긴 하지만 막상 겪어보면 상당히 당황스럽습니다.

 

 

공식문서에서 VSCode, IntelliJ 등 각 에디터 별 SDK 적용 방법을 설명하고 있습니다.

 

 

여기에서 안내하는 방법을 따르면 대부분의 문제는 해결됩니다. 저도 이 방법으로 매 번 효과를 보았었는데, 프로젝트 중간에 구조를 변경했던 이번 경우에는 왜인지 공식 문서의 방법으로도 문제가 해결되지 않았습니다. 다양한 방법을 시도해보고, 결국 해결에 성공했습니다. 이번 포스트에서는 시도했던 방법들과 효과를 봤던 해결법을 기록하려 합니다.

 

 

 

문제 상황

 

Cannot find module 에러

 

문제의 요지는 VSCode가 모듈을 찾을 수 없다는 점입니다. 하지만 막상 명령어를 이용해 실행시켜보면 정상적으로 실행이 되고, 빌드도 가능합니다. 코드 상의 문제나 실제 의존성이 설치되지 않은 경우는 아니라는 가정을 두고 시작하겠습니다.

 

만약 여기에서 막혔다면, 실제 의존성이 설치되지 않았을 가능성이 높으니 의존성 설치 명령어를 통해 필요한 모듈들을 설치해주세요.

 

// package.json에 명시되지 않은 경우
$ yarn add react react-dom react-router-dom @types/react @types/react-dom

// package.json에 명시되어 있을 경우
$ yarn install

 

 

공식 문서의 해결법 시도하기

가장 먼저 해볼 것은 공식 문서가 안내하는 해결법입니다.

 

$ yarn add @yarnpkg/sdks -D
$ yarn dlx @yarnpkg/sdks vscode

 

타입스크립트를 해석하기 위한 sdk 패키지를 DevDependancy에 추가하고, vscode로 설치해줍니다.

잠시 시간이 지나면, 자동으로 sdk와 함께 vscode 설정 파일까지 생성이 완료됩니다.

 

보통은 여기에서 문제가 해결되어 정상적으로 사용할 수 있게 됩니다.

 

 

sdk부터 설정 파일까지 자동으로 설치됩니다.

 

 

제 경우에는 이 과정 이후에도 여전히 문제가 남아있었습니다. 이 오류와 관련된 해결법들을 위주로 찾아보며 문제의 원인을 찾기 시작했습니다.

 

 

 

그래도 모듈이 읽히지 않을때

 

다양한 해결 과정들을 살펴보던 중 그 중 한 가지 눈에 밟힌 부분이 있었습니다. 타입스크립트의 버전을 워크스페이스의 설정에 맞춰주면 정상적으로 작동하다는 많았는데, 아무리 보아도 VS Code의 버전 뿐 Workspace의 버전에 관련된 내용은 찾을 수 없었습니다.

 

 

Use Workspace Version이 보이지 않습니다.

 

 

워크스페이스의 버전을 찾을 수 없다는 이야기는, 이 워크스페이스를 Yarn PnP 프로젝트로 사용하겠다는 VSCode의 설정이 적용되지 않았다는 말과도 같습니다. 다시 말해서, 위쪽에 설치되었던 .vscode 디렉토리는 무용지물이었다는 말이 될거라고 생각했습니다.

 

 

적용되지 않은 설정 파일들

 

이 설정 파일들이 적용되지 않았다고 생각하니 한 가지 가설이 떠올랐습니다.

"혹시 이 설정파일이 최상단에 있지 않기 때문에 vscode에서 읽지 못한게 아닐까?"

 

원래는 제 프로젝트의 모듈이 모두 잘 불러와지고 있었으나, 갑자기 로드가 안되기 시작한 것도 파일 구조를 바꾼 뒤였습니다. 기존의 프론트엔드 파일들만 있었던 구조에서, 한 레포지토리에 백엔드 파일까지 같이 올리다보니 .vscode 디렉토리에 상위 depth가 하나 추가되었습니다.

 

 

.vscode가 frontend 하위로 들어갔습니다.

 

곧바로 .vscode를 최상단으로 끌어올렸습니다. VSCode가 바뀐 파일을 찾는지 잠시 동작하는듯 했으나, 문제가 바로 해결되진 않았습니다. 하지만 경로 문제였다는 것을 알게 된 이상 해결 방법은 이미 알고 있습니다.

 

 

기존 경로를 바뀐 경로로 바꿔줍니다.

 

기존의 .yarn/sdks ... 로 시작하는 경로를 frontend/.yarn/sdks ... 로 변경해주면 새로 바뀐 구조에 맞는 올바른 경로가 될 것 입니다. 경로를 수정한 뒤 저장하고, 다시 tsx 파일로 가서 Select TypeScript Version을 선택해보겠습니다.

 

Use Workspace Version이 생겼습니다.

 

드디어, 보이지 않았던 선택지인 Use Workspace Version이 생겼습니다. 설정 파일을 올려주고, 경로를 다시 설정해주니 VSCode가 TypeScript sdk 파일을 인식하기 시작했습니다.

 

 

이제 VSCode가 모듈을 제대로 인식하고 있습니다.

 

 

잠시 후 빨간 줄들이 사라지고 성공적으로 모듈들을 인식하여 가져오는 모습입니다.

추가로 아래 쪽의 TypeScript의 버전을 확인해보니 4.9.5 sdk가 제대로 적용된것도 확인할 수 있었습니다.

 

 

요약 

 

문제 해결 과정을 간단히 요약하면,

 

1. 사용하려는 의존성 모듈이 제대로 설치되어 있는지 확인한다.
2. VSCode에 yarn pnp를 사용하기 위한 sdk를 설치하고 적용했는지 확인한다.
3. VSCode가 해당 설정을 올바른 경로에서 적용받고 있는지 확인한다.
4. TypeScript가 Workspace의 버전을 사용하도록 되어있는지 확인한다.

 

이렇게 정리될 것 같네요.

 

 

혹시 이 글을 읽고 계신 분이 저와 비슷한 문제를 겪고 계시다면,

위 사항들을 확인하셔서 빠르게 해결하셨으면 좋겠습니다.

 

긴 글 읽어주셔서 감사합니다.