문제상황
이 때 까지 아무런 문제가 없다가 오늘 갑자기 깃허브 액션을 통해 빌드를 수행하던 중 현 문제가 발생하였습니다. 에러 전문을 보면 node_modules/vite/dist/node/index.d.ts(5,41): 오류 TS2307: 'rollup/parseAst' 모듈 또는 해당 유형 선언을 찾을 수 없습니다. 라고 표기되고 있습니다.
문제원인
이 메시지는 TypeScript 컴파일러가 모듈 해석 방식과 관련하여 경고하는 내용입니다. 주요 원인 아래와 같습니다.
- TypeScript의 모듈 해석 설정이 최신 Node.js 버전이나 번들러와 호환되지 않는 옛 방식으로 설정되어 있는 경우
- 프로젝트가 사용하는 일부 패키지(여기서는 rollup)가 최신 모듈 시스템을 사용하고 있어, 현재 설정으로는 올바르게 해석되지 않는 경우
저 같은 경우에는 레거시 버전인 "node" 를 모듈 해석 설정으로 지정되어 있었습니다. 아마 해당 문제의 대다수가 이 문제일 것으로 보입니다.
개선방법
앞서 첨부한 이미지 내 에러코드를 보면 하단에 There are types at '/home/runner/work/food-picker/food-picker/node_modules/rollup/dist/parseAst.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'. 와 같이 개선책을 제시해주고 있습니다. 기존 tsconfig.json 파일을 구성하는 속성중 moduleResolution 을 nod16, nodenext, bundler 중 하나로 수정하라고 합니다(그 외 저는 이 이슈를 https://github.com/readmeio/markdown/pull/862 참고 했습니다.).
따라서 tsconfign.json 파일로 찾아가서 아래와 같이 수정해주면 문제가 해결 됩니다.(참고로 Bundler 는 타입스크립트 버전 v5 부터 제공하는 최신 모듈 해석기에 사용되는 도구라고 이해하면 됩니다.)
{
"compilerOptions": {
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
}
추가로, module 설정도 함께 업데이트하는 것이 좋습니다.
{ "compilerOptions": { "module": "ESNext", "moduleResolution": "bundler" // 또는 "node16", "nodenext" } }
이렇게 설정을 변경하면 TypeScript가 최신 모듈 시스템을 올바르게 해석할 수 있게 되어 경고 메시지가 해결될 것입니다.
나가는 말
현 문제는 최근까지 아무런 문제가 없다가 갑자기 발생한 문제입니다. 아마 테스팅 환경을 변경하면서, 이와 호환되지 않는 모듈 간에 충돌이 발생하여 생긴 문제로 보입니다. 다만, 대다수의 개발자들이 동일한 문제를 토로하여 개선 방법이 앞서 하단의 메시지와 같은 방식으로 제공되어 있기 때문에 바로 해결 가능한 문제입니다.
이번 문제가 발생한 이유는 해당 프로젝트를 만들 당시 프로젝트 환경이 레거시 됨에 따라 발생한 것이므로, 과연 내가 참고한 자료가 레거시된 것인지, 현재에도 사용되고 있는 것인지 매번 확인하는 습관을 기르는 것이 좋겠다라는 생각이 드는 경험이 되었던 것 같습니다.