모노레포 프로젝트에서 VSCode TypeScript 서버 크래시 문제 해결

모노레포 프로젝트에서 VSCode TypeScript 서버 크래시 문제 해결

TL;DR

Visual Studio Code의 설정에서 typescript.tsserver.experimental.useVsCodeWatcher 값을 false로 설정!!

오류 발생 환경

  • macOS Sonoma 14.4.1 on Apple MacBook Pro 13-inch (M1, 2020)
  • Visual Studio Code Insider v1.90.0  (Stable 버전에서도 동일 오류 발생)
  • TypeScript v5.4.5
  • 모노레포 프로젝트 + Yarn Berry v4.2.2 (PnP 사용)
  • yarn dlx @yarnpkg/sdks vscode로 생성된 TypeScript 언어 서버 (tsserver) 지정

오류 내용

[info] Killing TS Server
[info] Starting TS Server
[info] Using tsserver from: (monorepo path)/.yarn/sdks/typescript/lib/tsserver.js
[info] <syntax> Forking...
[info] <syntax> Starting...
[info] <semantic> Forking...
[info] <semantic> Starting...
[error] TSServer exited. Code: null. Signal: SIGTERM
[error] TSServer exited. Code: 1. Signal: null
Visual Studio Code 내의 출력(Output) - TypeScript에서 확인할 수 있는 로그

오류 내용이 되게 불친절합니다. verbose logging을 활성화하고 로그 파일을 확인해봐도 원인을 알 수 있는 내용이 없었고요. 뭐 어쩌라는거야!

오류 해결

[TypeScript] TSServer `createFileSystemWatcher` crashes with yarn PnP · Issue #212042 · microsoft/vscode
TL;DR “typescript.tsserver.experimental.useVsCodeWatcher”: true + yarn PnP = TSServer constantly crashing. Related Tickets #210687, #208872, #193848 (MCVE: https://github.com/BurningEnlightenment/r…

다행히도 정확히 같은 오류 내용의 이슈를 TypeScript 레포지토리에서 찾을 수 있었습니다.

최근 버전(TypeScript 또는 Visual Studio Code?)에 새로 생긴 설정 프로퍼티인 typescript.tsserver.experimental.useVsCodeWatcher비활성화(false) 하는 것으로 문제를 해결할 수 있었습니다.

해당 설정은 VS Code v1.89.0에서 새로 추가된 실험적인 설정이라고 하네요. 기존의 TS Server는 별도의 Node.js 기반 파일 감시 구현을 사용했는데, 이 실험적 기능을 활성화하면 VS Code에 내장된 파일 감시 구현을 공유 사용하여 더 효율적으로 작동시킬 수 있다고 합니다.
실험적 기능인 만큼 아직 안정적으로 작동하고 있진 않나 보네요.

TypeScript 확장을 takeover하여 동작하는 Vue 공식 확장 또한 이 이슈로 인해 정상 작동하지 않았고, 마찬가지로 위 VS Code 설정을 비활성화하면 다시 작동하게 됩니다.