'--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다

문제

.js 또는 .jsx 파일을 .tsx 파일로 변환하다가 마주한 오류

JSX 문법을 사용한 부분에 빨간 줄이 좍좍좍 쳐지면서 저 오류가 난다

원인

타입스크립트에서 JSX 문법을 사용하기 위해선 tsconfig.json에 jsx 옵션을 활성화해 주어야 한다

• preserve: 타입스크립트 컴파일 시 .jsx 그대로 내보낸다
• react-native: 타입스크립트 컴파일 시 내부 문법은 그대로 유지한 채 .js 파일로 내보낸다 (리액트 네이티브 용)
• react: 타입스크립트 컴파일 시 JSX 문법을 전부 React.createElement 호출로 변환하고, .js 파일로 내보낸다
• react-jsx, react-jsxdev: 타입스크립트 컴파일 시 JSX 문법을 전부 _jsx 호출로 변환하고, .js 파일로 내보낸다

react 로 설정하는 것이 제일 무난하다

해결

// tsconfig.json

...
    "jsx": "react" // jsx 타입 지정
...

한 줄을 추가한 후 cmd + shift + p ⇒ 개발자 창 다시 로드

 

위의 방법으로 해결이 안 될 경우 cmd + shift + p ⇒ Typescript: Select Typescript Version… (또는 Typescript 버전 선택…) 선택

 

작업 영억 버전 사용으로 바꾸면 해결된다고 한다

나는 VSCode, 작업 영역 버전 모두 비슷한 버전이라 1번째 방법으로 해결했다

---

참고자료

https://www.typescriptlang.org/tsconfig#jsx

https://www.typescriptlang.org/ko/docs/handbook/jsx.html