[기록/ERROR/React] TS1208: 'ExReact.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

■ 문제상황

typescript 기반의 react-app에서 아무 내용도 없는 빈 tsx 또는 ts 파일을 만들면, 다음과 같은 에러가 뜹니다.

빈 tsx 파일과 ts 파일

에러 발생

---

■ 문제원인

TypeScript 컴파일러가 --isolatedModules 플래그(flag, 참/거짓을 나타내는 1비트의 값)에 따라서 컴파일을 하는 도중에 발생하는 오류입니다. --isolatedModules 플래그가 true일 경우, 프로젝트 내의 모든 ts나 tsx 파일을 모듈로 컴파일됩니다. TypeScript에서는 import나 export가 있으면 모듈로 인식됩니다. 그렇지 않을 경우 전역 파일(A global script file)로 인식하고 모듈로 컴파일하지 못하게 되면서 오류를 발생시킵니다.

---

■ 해결방법

✅ (추천) import 또는 export 추가

(좌) export 문 추가 (우) import 문 추가

import ''; 처럼 빈 import문을 적어도 동작은 하지만 권장되지 않는 문법입니다. 빈 export 문은 괜찮습니다. 이 내용은 오류문의 마지막 문장에 적혀있습니다. (Add an import, export, or an empty 'export {}' statement to make it a module.)

 

❎ (비추천) tsconfig.json에서 isolatedModules 플래그 변경

주석이 적힌 부분이 isolatedModules이다

사진처럼 tsconfig.json을 변경하면 됩니다. (true -> false)

---

하지만 플래그를 변경하는 것에는 몇 개의 문제가 있습니다.

1. ts에는 적용이 안 됨
2. 외부 컴파일러에 따라, 해당 문제에 대한 컴파일 오류 파악 불가

 

1. ts에는 적용이 안 됨

이유는 모르겠으나 해당 플래그를 false로 변경해도 ts 파일은 여전히 오류가 발생합니다. 즉, ts는 import나 export를 계속 적어줘야 합니다.

 

2. 외부 컴파일러에 따라, 해당 문제에 대한 컴파일 오류 파악 불가

Babel은 유명한 외부 컴파일러의 일종입니다. Babel은 컴파일하는 동안 타입스크립트 코드를 제거하기 때문에, 해당 문제가 Babel 컴파일 단계에서 발생할 경우 오류 원인을 찾기 힘들 수도 있습니다. 따라서, 외부 컴파일러를 사용한다면 isolatedModules를 true로 설정하고 tsx 파일도 import나 export를 적어주는 것이 좋습니다.

---

처음에는 tsconfig를 수정했지만 지금은 원복한 상태입니다. 나중에 세팅 변경한 거 잊고 원인 못 찾을 것 같더라구요.. import나 export를 추가하는 게 조금 귀찮지만 제일 맘 편한 것 같습니다.

 

감사합니다. :)